SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
技術者募集中

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

使用例

ダウンロード

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 - マウスが乗ったらスライドショーを停止するかどうか

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

関連するメモ

コメント(3)

kominori 2011年5月8日 01:27

はじめまして。galleryview2.1.1の使い方で試行錯誤していて辿り着きました。

IE8.0でみると、スライドから次のスライドへ移るときに、前のスライドの文字が次のスライドの文字にかぶってしまうのですが、(それ以前のIEや、Safariでは大丈夫なようです)解消する方法がありましたら教えていただけないでしょうか。

不躾ですみませんがよろしくお願いいたします。

yoshimura 2011年5月9日 02:11

ほんとですね。IE8では、文字も画像も、切り替え時の半透明ができてない感じですね。コメントいただいて気がつきました。ありがとうございます。

対策は…パラメータの調節だけでは無理かもしれない。「transition_speed: 0」を設定すれば、切り替え時に文字は重ならなくなるけど、かっこよくない。

何か対策をひらめいたら試してみます。

不具合だとしたら、ver3.0(beta版)で直っているかも。

かずま 2011年5月31日 19:50

>IE8.0でみると、スライドから次のスライドへ移るときに、前のスライドの文字が次のスライドの文字にかぶってしまうのですが、(それ以前のIEや、?>Safariでは大丈夫なようです)解消する方法がありましたら教えていただけないでしょうか。

cssでpanel-overlayに背景を設定するときちんと遷移できます。これはjQueryでfadeをするときのIE8のバグらしくなにもこのプラグインだけの問題ではないようです。
ただ、今また新たな問題が….

IE8でjsファイルを読む込み前にキャプションがどっかで表示されている…