クリックすると浮き上がるように表示されます。ESCキーを押したり、右上の「Ｘ」か、映像外をクリックすると消えます。
デフォルトの表示です。クリックすると別のウインドウ（タブ）で拡大表示するだけです。
変更手順を以下に書きます。
さくらのブログでは、各ページの標準的なHTMLの記述を、変更できます。
これがデフォルトです。
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title><% if:extra_title %><% extra_title %><% if:current_page > 1 %> (<% current_page %>)<% /if %>: <% /if %><% blog.title %></title>
<meta name="description" content="<% if:extra_title %><% extra_title | nl2br | tag_strip %>,<% /if %><% blog.description | nl2br | tag_strip %>" />
<meta name="keywords" content="<% blog.keywords | oneline | tag_strip | __or__ | blog.title | oneline | remove_emoji | tag_strip %> <% extra_keywords | oneline | tag_strip %>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" href="<% css.page_url(page) %>" type="text/css" />
<link rel="stylesheet" href="<% site_info.blog_url %>/css/user-common.css" type="text/css" />
<link rel="alternate" href="<% blog.page_url %>index.rdf" type="application/rss+xml" title="RSS" />
<% if:blog.has_foaf -%>
<link rel="meta" type="application/rdf+xml" title="FOAF" href="<% blog.page_url %>foaf.rdf" />
<% /if -%>
<link rel="shortcut icon" href="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/favicon.ico" type="image/vnd.microsoft.icon">
</head>
<body>
<div id="container">
<script type="text/javascript" language="JavaScript" src="<% site_info.blog_url %>/contents/js/ad_plugin.js"></script>
<div id="banner">
<% content_header %>
</div>
<% if:have_content_left -%>
<div id="links-left">
<% content_left %>
</div>
<% /if -%>
<div id="content">
<% content_main %>
<% if:page_name eq 'comment' -%>
これに、FancyBoxを利用するための記述を付け加えます。（赤字の部分）
<header>内に、javascriptやcssへのリンクを、<body>内の、本文が記述される先頭と末尾の部分に、FancyBox用の<div>タグ（開始タグと終了タグ）です。
リンク先のデータは、qp.jpn.orgに事前に置いてあります。（外部からのリンクもできますが、出来るだけご遠慮ください。当サイトが閉鎖したときにはもちろん、エラーになります。）
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title><% if:extra_title %><% extra_title %><% if:current_page > 1 %> (<% current_page %>)<% /if %>: <% /if %><% blog.title %></title>
<meta name="description" content="<% if:extra_title %><% extra_title | nl2br | tag_strip %>,<% /if %><% blog.description | nl2br | tag_strip %>" />
<meta name="keywords" content="<% blog.keywords | oneline | tag_strip | __or__ | blog.title | oneline | remove_emoji | tag_strip %> <% extra_keywords | oneline | tag_strip %>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" href="<% css.page_url(page) %>" type="text/css" />
<link rel="stylesheet" href="<% site_info.blog_url %>/css/user-common.css" type="text/css" />
<link rel="alternate" href="<% blog.page_url %>index.rdf" type="application/rss+xml" title="RSS" />
<% if:blog.has_foaf -%>
<link rel="meta" type="application/rdf+xml" title="FOAF" href="<% blog.page_url %>foaf.rdf" />
<% /if -%>
<link rel="shortcut icon" href="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/favicon.ico" type="image/vnd.microsoft.icon">
<!-- Add jQuery library -->
<script type="text/javascript" src="http://qp.jpn.org/lib/jquery-1.7.2.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="http://qp.jpn.org/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="http://qp.jpn.org/source/jquery.fancybox.js?v=2.1.0"></script>
<link rel="stylesheet" type="text/css" href="http://qp.jpn.org/source/jquery.fancybox.css?v=2.1.0" media="screen" />
<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="http://qp.jpn.org/source/helpers/jquery.fancybox-media.js?v=1.0.3"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox();
// revised
$(".fancybox-pad8").fancybox({
padding: 8,
});
});
</script>
<style type="text/css">
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
</style>
</head>
<body>
<div id="container">
<script type="text/javascript" language="JavaScript" src="<% site_info.blog_url %>/contents/js/ad_plugin.js"></script>
<div id="banner">
<% content_header %>
</div>
<% if:have_content_left -%>
<div id="links-left">
<% content_left %>
</div>
<% /if -%>
<div id="content">
<div id="fancybox">
<% content_main %>
</div>
<% if:page_name eq 'comment' -%>
これを保存。準備は完了です。
さて、実際の投稿時の処理の仕方です。
さくらのブログでは、自動で作られるサムネールと画像の部分はこんな記述になっています。
<a href="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/satuki02.jpg" target="_blank">
<img src="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/satuki02-thumbnail2.jpg" width="400" height="300" border="0" align="" alt="satuki02.jpg" />
</a>
その場合の表示です。
FancyBoxを使いたい場合は、画像のリンク先の画像の<a>タグ内に、
class="fancybox-pad8" data-fancybox-group="gallery"
を付け加えます。
こんな風に。
<a class="fancybox-pad8" data-fancybox-group="gallery" href="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/satuki02.jpg">
<img src="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/satuki02-thumbnail2.jpg" width="400" height="300" border="0" align="" alt="satuki02.jpg" />
</a>
class名は、私が<header>内に設定しているものと合わせています。
data-fancybox-group名は任意で、同じグループ名の画像が連続して表示されます。
サンプルです。矢印キーを使ったり、画像の左または右半分をクリックすることで、前後の画像に変わります。
第１グループ data-fancybox-group="gallery"
第２グループ data-fancybox-group="gallery2"
何もしなくてもデフォルト扱いで、class名とグループ名が入るといいのですが…。でも、<a>の中身が画像とは限らないので、それは無理ですね。
