法則76 高機能なフォトギャラリーを作る

サムネイルを並べて表示するテンプレートソース【1】

<MTAssets type="image" file_ext="jpg" lastn="20">
<MTAssetsHeader>
<ul class="imageList">
</MTAssetsHeader>
<li><$MTAssetThumbnailLink height="75" square="1" regex_replace='/>/',
' rel="lightbox[image]">'$></li>
<MTAssetsFooter>
</ul>
</MTAssetsFooter>
</MTAssets>

出力される（X）HTMLソース

<ul class="imageList">
<li><a href="http://example.com/image/sample.jpg" rel="lightbox[image]"><img src="http://example.com/path/to/thumbnail.jpg" width="75" height="75" alt=" アイテムラベル" /></a></li>
... 略...
</ul>

Lightbox JSライブラリを読み込む（X）HTMLソース【2】

<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />

ダウンロード

Lightbox2

• 第5章 多彩なWebページを作成する法則