Highslide JS
近頃は汎用的で高機能な Ajax JavaScript ライブラリが充実してきましたが、ただサムネイル拡大表示をスマートに行いたい、という時はこちらのほうがこれを使うのがよさそうです。
一番単純な例は次のようなものです。
<!– ヘッダで定義しておく –>
<script type=”text/javascript” src=”my-highslide-dir/highslide.js”></script>
<!– 実際にサムネイル表示する –>
<a href=”拡大画像のURL” class=”highslide” onclick=”return hs.expand(this)”>
<img src=”サムネイル画像のURL” />
</a>
JavaScript 非対応の時はただ拡大画像へのリンクになるあたりがスマートです。
画像のポップアップだけではなく、ポップアップ画像に任意の説明を付与も比較的簡単にでき、機能面でも素晴らしいですね。
参考サイトを参照すると詳しい使い方や利用例があります。
参考:
– Highslide JS でサムネイル画像を拡大表示する(小粋空間)
– Highslide JS のサンプルページ(caramel-tea.com)