【Javascript】jQueryを使ったスライドショー GalleryView

Tweet

Category JavaScript / Tagged jQuery 2010/05/20

使用例

• サンプル
• 岐阜県の老舗旅館 十八楼 写真ギャラリー

ダウンロード

http://plugins.jquery.com/project/galleryview

使い方

よくあるjQueryのプラグイン同様、以下のような感じで。

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.galleryview-2.1.1-pack.js"></script>
<script type="text/javascript" src="js/jquery.timers-1.2.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('#photos').galleryView({
      panel_width: 800,
      panel_height: 300,
      frame_width: 100,
      frame_height: 100
    });
  });
</script>

設定できる項目とデフォルト値は以下のとおり。

show_panels: true,		//BOOLEAN - panel部分を表示するかどうか
show_filmstrip: true,		//BOOLEAN - filmstrip部分を表示するかどうか

panel_width: 600,		//INT - panelの幅
panel_height: 400,		//INT - panelの高さ
frame_width: 60,		//INT - filmstripの高さ
frame_height: 40,		//INT - filmstripの高さ

start_frame: 1,			//INT - 最初に何番目のpanelとframeを表示するか
filmstrip_size: 3,		
transition_speed: 800,		//INT - 画像切り替えの動作の時間（ミリ秒）
transition_interval: 4000,	//INT - 画像切り替えの時間間隔（ミリ秒）

overlay_opacity: 0.7,		//FLOAT - 上に乗るpanelの透明度(1.0 = 不透明, 0.0 = 透明)
frame_opacity: 0.3,		//FLOAT - 非アクティブなframeの透明度(1.0 = 不透明, 0.0 = 透明)

pointer_size: 8,		//INT - 表示中のframeを示すpointerの高さ

nav_theme: 'dark',		//STRING - 使用するテーマの名前('themes'ディレクトリにその名前のディレクトリがなくてはならない)
easing: 'swing',		//STRING - easingの動きのタイプ(jQueryからは'swing','linear'が利用できる。jQuery UI や Easing plugin を使うともっと多彩な動きができる)

filmstrip_position: 'bottom',	//STRING - filmstripの位置(bottom, top, left, right)
overlay_position: 'bottom',	//STRING - panelの位置(bottom, top, left, right)

panel_scale: 'nocrop',		//STRING - panelの画像がサイズ調整方法 (crop = panelの幅、高さをもとに画像のサイズを変更する, nocrop = scale image and preserve original aspect ratio)
frame_scale: 'crop',		//STRING - filmstripの画像のサイズ調整方法(same as above)

frame_gap: 5,			//INT - filmstripの中のframeの隙間（ピクセル）

show_captions: false,		//BOOLEAN - frameのcaptionを表示するかどうか
fade_panels: true,		//BOOLEAN - 画像を切り替えるときフェードするかすぐ切り替えるか
pause_on_hover: false		//BOOLEAN - マウスが乗ったらスライドショーを停止するかどうか

上記以外で見た目にかかわる部分はスタイルシートで指定する。