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

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

sponsors

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

記事作成:
記事URL:

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