サムネイルをドラッグさせ大きな画像を省スペースで表示するJavaScript「jQuery Image Scroller Plugin」

ECで縦長の、特にモデルが着用した画像を見せたい場合はスペースをとりがちです。
一方で、多くの画像を一覧で見せたいという願望もあるかと思います。
そんな悩みを解消するのが、jQuery Image Scroller Pluginです。
大きな画像を指定の大きさで表示させ、隠れた部分はサムネイルのドラッグで表示させられます。

使用方法

jQuery Image Scroller Pluginからファイル一式をダウンロード。


<link href="imageScroller.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>	
<script type="text/javascript" src="jquery.imageScroller.js"></script>	
<script>
$(function(){
   $('.class名').imageScroller();
});
</script>

CSS内の記述
.image-scroller
⇒全体の表示を調整。height,widthで表示領域のサイズを決められます。

.image-scroller .preview
⇒サムネイルの表示を調整。上記同様にサイズを指定できるほか、left,bottomの値を調整し、表示場所も指定可能。

.image-scroller .preview .indicator
⇒サムネイルをドラッグさせる領域です。

あとは、下記のように大きい画像とサムネイルを記述すれば完成です。


<div class="class名">
  <img src="大きい画像パス" class="feature-image" />
  <div class="preview">
    <img src="サムネイル画像パス" />
  </div>
</div>

サンプル

Javascriptサンプルページ一覧

skuare.net