6.48 Liteboxによるクールな画像表示 ★
P.609
●スタイルシートの変更
Litebox.cssに記述されている背景画像のパスは、「相対パス」で記述されています。例えば、前の画像を表示するためのリンク用画像のパスは、次のようになっています。
#prevLink:hover, #prevLink:visited:hover {
background: url(litebox/images/prevlabel.gif) left 15% no-repeat;
}
「スタイルシート」インデックステンプレート
...前略...
#prevLink, #nextLink{
background: transparent url(<mt:blogURL />litebox/images/blank.gif) no-repeat;
}
#prevLink:hover, #prevLink:visited:hover {
background: url(<mt:blogURL />litebox/images/prevlabel.gif) left 15% no-repeat;
}
#nextLink:hover, #nextLink:visited:hover {
background: url(<mt:blogURL />litebox/images/nextlabel.gif) right 15% no-repeat;
}
...後略...
●head要素にlink要素とscript要素を追加
「ヘッダー」テンプレートモジュール(サンプルテンプレート)
...前略...
<title><mt:getVar name="title"></title>
<link rel="stylesheet" href="<mt:blogURL />litebox/css/lightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<mt:link template="スタイルシート" />" type="text/css" />
...中略...
<mt:if name="index_template">
<mt:CCLicenseRDF />
</mt:if>
<script type="text/javascript" src="<mt:blogURL />litebox/js/prototype.lite.js"></script>
<script type="text/javascript" src="<mt:blogURL />litebox/js/moo.fx.js"></script>
<script type="text/javascript" src="<mt:blogURL />litebox/js/litebox-1.0.js"></script>
<script type="text/javascript">
//<![CDATA[
fileLoadingImage = "<mt:blogRelativeURL />litebox/images/loading.gif";
fileBottomNavCloseImage = "<mt:blogRelativeURL />litebox/images/closelabel.gif";
//]]>
</script>
</head>
...後略...
★「HTMLヘッダー」テンプレートモジュール(デフォルトテンプレート)
003と008~016を追加します。サンプルテンプレートと同様、追加位置は変更しないでください。
001:<meta http-equiv="Content-Type" content="text/html; charset=<$mt:PublishCharset$>" />
002:<meta name="generator" content="<$mt:ProductName version="1"$>" />
003:<link rel="stylesheet" href="<mt:BlogURL />litebox/css/lightbox.css" type="text/css" media="screen" />
004:<link rel="stylesheet" href="<$mt:Link template="styles"$>" type="text/css" />
005:<link rel="start" href="<$mt:BlogURL$>" title="Home" />
006:<link rel="alternate" type="application/atom+xml" title="Recent Entries" href="<$mt:Link template="feed_recent"$>" />
007:<script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>
008:<script type="text/javascript" src="<mt:BlogURL />litebox/js/prototype.lite.js"></script>
009:<script type="text/javascript" src="<mt:BlogURL />litebox/js/moo.fx.js"></script>
010:<script type="text/javascript" src="<mt:BlogURL />litebox/js/litebox-1.0.js"></script>
011:<script type="text/javascript">
012://<![CDATA[
013:fileLoadingImage = "<mt:BlogRelativeURL />litebox/images/loading.gif";
014:fileBottomNavCloseImage = "<mt:BlogRelativeURL />litebox/images/closelabel.gif";
015://]]>
016:</script>
017:<$mt:CCLicenseRDF$>
P.610
●フッターにscript要素の追加
「フッター」テンプレートモジュール(サンプルテンプレート)
<p id="footer">Copyright © 2008 <mt:blogName encode_html="1" /> All Rights Reserved.</p>
<script type="text/javascript">
//<![CDATA[
initLightbox();
//]]>
</script>
</body>
</html>
★「バナーフッター」テンプレートモジュール(デフォルトテンプレート)
005~009を追加します。
...前略...
001:</mt:BlogIfCCLicense>
002: </div>
003: </div>
004:</div>
005:<script type="text/javascript">
006://<![CDATA[
007:initLightbox();
008://]]>
009:</script>
010:</body>
011:</html>
画像リンクつきブログ記事の投稿
<a href="画像ファイルのURL" rel="lightbox">
<img src="サムネイル画像のURL" width="サムネイル画像の幅" height="サムネイル画像の高さ" alt="代替テキスト" title="画像タイトル" />
</a>
P.613
■画像をブログ記事に挿入したときのform要素について
<form mt:asset-id="1" class="mt-enclosure mt-enclosure-image" ...略... >
...中略...
</form>
<span class="mt-enclosure mt-enclosure-image" ...略... >
...中略...
</span>
rel属性を手動で付与しない方法
●JavaScript外部ファイルの作成とアップロード
litebox-1.0.custom.js
initLightbox = function() {
addRelLightboxAttribute('main');
myLightbox = new Lightbox();
};
addRelLightboxAttribute = function(id) {
if (!document.getElementsByTagName) { return; }
var ele;
if (id) {
ele = $(id);
if (!ele) { return; }
} else {
ele = document.body;
}
var anchors = ele.getElementsByTagName('a');
for (var i = 0; i < anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute('href').match(/jpg$|gif$|png$/)) {
var rel = String(anchor.getAttribute('rel'));
if (!rel.toLowerCase().match('lightbox')) {
anchor.setAttribute('rel', rel ? rel+' lightbox' : 'lightbox');
}
}
}
};
P.614
litebox-1.0.custom.js
...前略...
addRelLightboxAttribute('content');
...後略...
litebox-1.0.custom.js
...前略...
addRelLightboxAttribute('');
...後略...
●head要素にlink要素とscript要素を追加
「ヘッダー」テンプレートモジュール(サンプルテンプレート)
...前略...
<script type="text/javascript" src="<mt:blogURL />litebox/js/prototype.lite.js"></script>
<script type="text/javascript" src="<mt:blogURL />litebox/js/moo.fx.js"></script>
<script type="text/javascript" src="<mt:blogURL />litebox/js/litebox-1.0.js"></script>
<script type="text/javascript">
//<![CDATA[
fileLoadingImage = "<mt:blogRelativeURL />litebox/images/loading.gif";
fileBottomNavCloseImage = "<mt:blogRelativeURL />litebox/images/closelabel.gif";
//]]>
</script>
<script type="text/javascript" src="<mt:blogURL />litebox/js/litebox-1.0.custom.js"></script>
</head>
...後略...
★「HTMLヘッダー」テンプレートモジュール(デフォルトテンプレート)
010を追加します。サンプルテンプレートと同様、追加位置は変更しないでください。
...前略...
001:<script type="text/javascript" src="<mt:BlogURL />litebox/js/prototype.lite.js"></script>
002:<script type="text/javascript" src="<mt:BlogURL />litebox/js/moo.fx.js"></script>
003:<script type="text/javascript" src="<mt:BlogURL />litebox/js/litebox-1.0.js"></script>
004:<script type="text/javascript">
005://<![CDATA[
006:fileLoadingImage = "<mt:BlogRelativeURL />litebox/images/loading.gif";
007:fileBottomNavCloseImage = "<mt:BlogRelativeURL />litebox/images/closelabel.gif";
008://]]>
009:</script>
010:<script type="text/javascript" src="<mt:BlogURL />litebox/js/litebox-1.0.custom.js"></script>
011:<$mt:CCLicenseRDF$>