サムネイル画像をクールにポップアップし、ドラッグで動かせる「Highslide JS」をご紹介したいと思います。
実装
まずはサイトからファイルをダウンロードします。バージョンを選択し『Download now!』ボタンをクリック。遷移したページ内にある Highslide Download 項目から『Yes』をクリックしてファイルを保存します。
解凍したファイルから「highslide」フォルダを、実装するサイトのドキュメントルートにコピー
HTML の<head>～</head>内に以下を記述
<script type="text/javascript" src="highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.wrapperClassName = 'wide-border';
</script>
適用したいサムネイル画像に以下を記述
<div>
<a href="クリックした後の画像URL" class="highslide" onclick="return hs.expand(this)">
<img src="サムネイル時の画像URL" alt="Highslide JS"
title="Click to enlarge" height="サムネイル画像の高さ" width="サムネイル画像の幅" /></a>
<div class="highslide-caption">
ここに記述するとポップアップ時に表示されます。
</div>
</div>その他にも 5 パターンあり、ダウンロードしたフォルダにサンプルが入っています。設置方法も HTML にコメントで書いてありますので、興味がある人はお試しあれ！
注意！
商用利用する場合は利用料金がかかりますのでご注意ください。(個人利用は無料)
