サムネイルをドラッグして画像の表示領域をスクロールするスクリプト -Image Scroller
Post on:2010年8月12日
sponsors
サムネイル画像をドラッグして、大きい画像の表示領域をその動作に合わせてスクロールさせるスクリプトを紹介します。
jQuery Image Scroller Plugin
デモページ
このスクリプトは作者がPUMAのサイトを構築する際に使用したスクリプトをjQueryのプラグインとして作り直したとのことです。
PUMAで使用されているのは、下記のページです。
HTML
大きな画像とサムネイル画像をコンテナ（image-scroller）で内包します。
|
1 2 3 4 5 6 7 8 |
<textarea name="code" class="html" cols="60" rows="5"> <div class="image-scroller"> <img src="images/feature.jpg" alt="" class="feature-image" height="1280" width="960" /> <div class="preview"> <img src="images/preview.jpg" alt="" height="180" width="135" /> </div> </div> </textarea> |
JavaScript
jquery.jsと当スクリプトを外部で、下記のスクリプトを記述します。
|
1 2 3 4 5 |
<textarea name="code" class="html" cols="60" rows="5"> $(document).ready(function() { $('div.image-scroller').imageScroller(); }); </textarea> |
スクリプトのオプションでは大きい画像とサムネイル画像のclass名の変更、ドラッグする箇所に表示されるテキストの変更が可能です。
sponsors
