jQuery imageScroller.jsを使って、大きな画像の部分をサムネイルから選択して表示

HOME

サイトマップ

営業日カレンダー

お問い合わせ

jQueryプラグインjquery.imageScroller.jsを使って、表示枠サイズよりも大きな画像をサムネイルをスクロールさせて選択し、部分的に表示します。サムネイルの「DRAG ME」の部分をつかんで上下にドラッグし、画像の部分をスクロール表示させます。

使い方は、大きなサイズの画像とそのサムネイル画像を用意し、jQueryとjquery.imageScroller.min.jsを読みこんだページに次のようにスクリプトとhtmlを記述します。

scriptソース

  <script>
    $(document).ready(function() {
      $('div.image-scroller').imageScroller();
    });
  </script>

htmlソース

  <div class="image-scroller">
      <img src="images/sample.png" alt="" class="feature-image" height="1280" width="960" />
      <div class="preview">
        <img src="images/sample-s.png" alt="" height="180" width="135" />
      </div>
  </div>

※参照元：https://github.com/davist11/Image-Scroller