強火で進め このページをアンテナに追加 RSSフィード

整理された情報は こちら へどうぞ。

2008年03月28日

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

f:id:nakamura001:20080329203845j:image

基本情報

・サイト

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/

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト

コメントを書くには、なぞなぞ認証に回答する必要があります。

トラックバック - http://d.hatena.ne.jp/nakamura001/20080328/1206725556