Dynamic Image Gallery and Slideshow - 軽量・シンプルなJavaScriptスライドショー
Lightboxなど様々なJavaScriptスライドショーライブラリがありますが、30KB以上のものはほとんどです。「Dynamic Image Gallery and Slideshow」はJavaScriptとCSSで動作するスライドショーライブラリで、JavaScriptの本体はわずか3.1KB 程度（圧縮版）でスマートです。
◇ 軽量。
◇ フリー。フリーライセンスを採用しており、非商用・商用を問わず無償でご利用可能です。
◇ 画像スライドショー：自動切換え、サムネールなどの機能を備えています。
１）CSS定義。<head></head>の間に次のようなコードを記述します。
※サーバの環境に応じて、実際のCSS・Javascriptパスを入替えてください。
２）HTMLコード（画像ギャラリーコード）
※li要素のvalue属性はフルサイズの拡張子を外した画像の名称になります。
３）JavaScript（セットアップコード）
４）フォルダ階層
以上のサンプルの場合、フォルダの階層は次のようになります。
画像ギャラリー.html
style.css
slide.js
fullsize
\1.jpg
\2.jpg
thumbs
\1.jpg
\2.jpg
デモ
機能・特徴
◇ 軽量。
◇ フリー。フリーライセンスを採用しており、非商用・商用を問わず無償でご利用可能です。
◇ 画像スライドショー：自動切換え、サムネールなどの機能を備えています。
使い方
１）CSS定義。<head></head>の間に次のようなコードを記述します。
<link rel="stylesheet" type="text/css" href="style.css" />
※サーバの環境に応じて、実際のCSS・Javascriptパスを入替えてください。
２）HTMLコード（画像ギャラリーコード）
<div id="gallery"> <div id="imagearea"> <div id="image"> <!-- 前へ・次へボタン --> <a href="javascript:slideShow.nav(-1)" class="imgnav " id="previmg"></a> <a href="javascript:slideShow.nav(1)" class="imgnav " id="nextimg"></a> </div> </div> <div id="thumbwrapper"> <div id="thumbarea"> <ul id="thumbs"><!-- サムネール画像 --> <li value="1"><img src="thumbs/1.jpg" width="179" height="100" alt="" /></li> <li value="2"><img src="thumbs/2.jpg" width="179" height="100" alt="" /></li> ... </ul> </div> </div> </div>
※li要素のvalue属性はフルサイズの拡張子を外した画像の名称になります。
３）JavaScript（セットアップコード）
<script type="text/javascript"> var imgid = 'image'; var imgdir = 'fullsize'; var imgext = '.jpg'; var thumbid = 'thumbs'; var auto = true; var autodelay = 5; </script> <script type="text/javascript" src="slide.js"></script>
４）フォルダ階層
以上のサンプルの場合、フォルダの階層は次のようになります。
画像ギャラリー.html
style.css
slide.js
fullsize
\1.jpg
\2.jpg
thumbs
\1.jpg
\2.jpg
デモ