サムネイルをドラッグして画像の表示領域をスクロールするスクリプト -Image Scroller

サムネイル画像をドラッグして、大きい画像の表示領域をその動作に合わせてスクロールさせるスクリプトを紹介します。

デモのキャプチャ

jQuery Image Scroller Plugin
デモページ

このスクリプトは作者がPUMAのサイトを構築する際に使用したスクリプトをjQueryのプラグインとして作り直したとのことです。

PUMAで使用されているのは、下記のページです。

サイトのキャプチャ

PUMAのプロダクトページ

HTML

大きな画像とサムネイル画像をコンテナ(image-scroller)で内包します。

JavaScript

jquery.jsと当スクリプトを外部で、下記のスクリプトを記述します。

スクリプトのオプションでは大きい画像とサムネイル画像のclass名の変更、ドラッグする箇所に表示されるテキストの変更が可能です。

sponsors

top of page

©2018 coliss