前の記事 ≪:2006年プログラミング言語人気ランキングTOP20
次の記事 ≫:ブラウザのみで画像のキリトリ&リサイズ&フィルタ実行が可能な「Pi...

画像の拡大プレビューを超クールに行える「Highslide JS」

2006年10月24日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
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>

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

関連エントリ

関連の記事検索:JavaScript, Ajax, ライブラリ, 画像
スポンサード リンク

By.KJ : 2006年10月24日 07:03 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)