画像　拡大プレビュー　JS

FancyZoom 1.1  - 最近リリースされたFancyZoom。クリックでアニメーションしながら画像がズーム


Highslide JS - JavaScript thumbnail viewer

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>

Live Thumbnail Demo - 画像をその場でズイズイっとリサイズ

(参照記事: サムネイルと元画像の見せ方) 


FancyZoom meet jQuery // Ordered List // We Make The Web Beautifully Simple

画像をスムーズに拡大できるjQuery版FancyZoom。
サムネイル画像をクリックするとそこからズームされる感じにアニメーションされるFancyZoomのjQuery版が出たみたい