Highslide JS, formerly Vevstein Thumbnail Expander, is a piece of JavaScript that streamlines the use of thumbnail images on web pages. The library offers these features and advantages:

画像の拡大プレビューを超クールに行える「Highslide JS」。
サムネイルをクリックするとそのまま画像がズームされ、影付きで写真を表示できます。



設置は次のように行います。

1. スクリプトインクルード
   <script type="text/javascript" src="highslide/highslide.js"></script>
2. オブジェクト初期化
   <script type="text/javascript">   
       hs.graphicsDir = 'highslide/graphics/';
       window.onload = function() {
           hs.preloadImages();
       }
   </script>
3. CSS定義
4. ポップアップ用の空DIV定義
   <div id="highslide-container"></div>
5. サムネイル画像リンク作成。class="highslide" かつ onclick="return hs.expand(this)" をアンカータグの属性に指定。
   <a href="images/full-image.jpg" class="highslide" onclick="return hs.expand(this)">
    <img src="images/thumbnail.jpg" alt="Highslide JS" id="thumb1"
     title="Click to enlarge" height="120" width="107" />
   </a>

ダウンロード後のサンプルが充実しているので比較的簡単に設置できるでしょう。
まずはダウンロードしてみましょう。

関連エントリ

• LightBox風エフェクトライブラリのiBox
• LightBox風リサイズ可能ダイアログ表示ライブラリ:LITBox
• 画像やページをLightBox風に表示できるThickbox
• LightBoxライクに同一ページ内の要素をポップアップするライブラリ