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 &copy; 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$>

ウェブページ

Powered by Movable Type 4.261

このアーカイブについて

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。