[JS]一つのリスト要素で実装する画像ギャラリーのスクリプト -slideViewerPro

カスタマイズが可能な、一つのリスト要素で実装する画像ギャラリーのスクリプト「slideViewerPro」を紹介します。

上記のキャプチャはslideViewerProの元となるslideViewerのもので、直系の子孫にあたるとのことです。

画像の箇所は、一つのリスト要素で構成されています。

HTML

<div id="my-folio-of-works" class="svwp">
<ul>
<li><img alt="Meander - P.J. Onori" src="images/01.jpg" /></li>
<li><img alt="Flock and Predator - L. Ongaro" src="images/02.jpg" /></li>
<li><img alt="Empathy - K. McDonald" src="images/03.jpg" /></li>
<li><img alt="DIY 3D Scanner - K. McDonald" src="images/04.jpg" /></li>

		<!--eccetera-->
	</ul>
</div>

カスタマイズも変数の値を変更するだけで、カラーやサイズ、スピードなどを簡単に変更することができます。

slideViewerProはjQueryのプラグインのため、実装にはjquery.jsが必要です。