基本情報
・サイト
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>
http://www.nicovideo.jp/watch/sm2735996
なお画像はこちらのものを使わせて頂きました。ありがとうございます。
EyesPic - フリー画像素材
http://eyes-art.com/pic/