Highslide JSによるJavaScriptでのサムネイル表示・スライドショー

基本情報

・サイト
Highslide JS - JavaScript thumbnail viewer
http://vikjavev.no/highslide/
・ライセンス
http://vikjavev.no/highslide/#licence

▼無料版

Creative Commons(表示-非営利)
2次使用可能
クレジット表示が必要
非営利でしか使用できない
個人サイト、学校のサイトに使用できる

※この他に商用(有料)版もある。

・バージョン
3.3.12(2008年3月29日現在)

画像1枚だけ表示する

サンプル

【解説】
1. Highslide JSの読み込み。

<script type="text/javascript" src="highslide/highslide.js"></script>

2. 各種設定。

<script type="text/javascript">    
    hs.graphicsDir = 'highslide/graphics/';
    hs.outlineType = 'rounded-white';<!-- 枠線指定。 highslide\graphics\outlines にあるpngファイル名を指定 -->

    hs.restoreTitle = 'ドラッグで移動できます。クリックで元のサイズに戻ります。';
</script>

hs.graphicsDir→Highslide JS付属の画像ファイルの格納ディレクトリ指定。
hs.outlineType→枠線に使用するpngファイルを指定。
hs.restoreTitle→画像拡大時に表示されるヒントの文字列

3. 表示する画像ファイルの指定。

<!-- ここでフルサイズの画像ファイルを指定 -->
<a id="thumb1" href="images/full_image.jpg" class="highslide" onclick="return hs.expand(this)">
	<!-- ここでサムネイル画像ファイルを指定 -->
	<img src="images/thumbnail.jpg" alt="Highslide JS"
		title="クリックして拡大" height="120" width="107" /></a>

複数表示+スライドショー機能付加

サンプル

【解説】
1. 表示したい画像ファイルを以下のパターンで指定。

<a id="thumb1" href="images/full_01.jpg" class="highslide" onclick="return hs.expand(this)">
	<img src="images/thumb_01.jpg" alt="Highslide JS" 
		title="眼鏡橋" width="107" height="160" /></a>


<!-- Repetionion of the above -->

<a id="thumb2" href="images/full_02.jpg" class="highslide" onclick="return hs.expand(this)">
	<img src="images/thumb_02.jpg" alt="Highslide JS" 
		title="かずら橋" width="160" height="107" /></a>


<a id="thumb3" href="images/full_03.jpg" class="highslide" onclick="return hs.expand(this)">
	<img src="images/thumb_03.jpg" alt="Highslide JS" 
		title="品の滝" width="107" height="160" /></a>

2. スライドショーのコントロールバーの追加。これを追加しなくても矢印キーによる画像の移動は可能。

<div id="controlbar" class="highslide-overlay controlbar">
	<a href="#" class="previous" onclick="return hs.previous(this)" title="Previous (left arrow key)"></a>
	<a href="#" class="next" onclick="return hs.next(this)" title="Next (right arrow key)"></a>
    <a href="#" class="highslide-move" onclick="return false" title="Click and drag to move"></a>
    <a href="#" class="close" onclick="return hs.close(this)" title="Close"></a>
</div>