消えたjQueryプラグイン「GalleryView」を追え！

ボク的には結構お気に入りだったjQueryプラグイン「GalleryView」を配信していたサイトが「This Account Has Been Suspended」というメッセージだけを残して消えてす。管理人の@jackwandersも、2011年3月15日のツイートを最後に沈黙してます。とは言っても年に数回のリリース告知しかツイートしてない人ですが……。

[追記 2012.02.15] いつのまにやらjQueryプラグイン「GalleryView」を配信していたサイトがさらにパワーアップして復活しとります！！

jQuery Pluginsのサイトの検索にも引っかからないので、結構探すのに苦労しそう。

GalleryView公式サイトで公開していた多くのサンプルが昇天してしまったので、Googleのキャッシュ等からなんとか復活の呪文を唱えてみます。

※サンプルの画像はlorempixum - placeholder images for every caseから拝借してます。
※以下の和訳は超いいかげんなので、間違いがあっても笑って見過ごしてくださいw

消える前はGalleryView 3.0 beta 3で、「Beta 4 Coming Soon!」という告知まで出てたんだけど、ボクレベルのネット徘徊能力では探し出すことができませんでした。なのでjQuery Pluginsのサイトの奥深くからダウンロードします。

galleryview 3.0-beta 1.1 | jQuery Plugins

残念ながらbeta 1.1です（涙

では以下、GalleryViewの簡単な説明とサンプルです。というか、消える前のGalleryView公式サイトの超意訳です。

基本動作

基本的に、GalleryViewとはサムネイル付きのスライドショーです。

GalleryViewでは、TimerプラグインとEasingプラグインが必要。これらとjQuery、GalleryViewプラグイン（CSSとJS）をHEADタグ内で読み込みます。

<link rel="stylesheet" href="galleryview/jquery.galleryview-3.0.css" />
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.4");
</script>
<script type="text/javascript" src="galleryview/jquery.timers-1.2.js"></script>
<script type="text/javascript" src="galleryview/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="galleryview/jquery.galleryview-3.0.min.js"></script>

Timerプラグイン、Easingプラグインともに、配布ファイル内にバンドルされています。

で、GalleryViewを実際に動作させるには、id付きのUL要素だけでOK。

<ul id="gallery">
	<li><img src="img/hoge.jpg" title="HogeHoge" /></li>
	<li><img src="img/fuga.jpg" title="FugaFuga" /></li>
	…
</ul>

これに加えて、以下のJavascriptでGalleryViewプラグインを呼び出します。（HEAD内推奨）

$(document).ready(function(){
	$('#gallery').galleryView();
});

ID名はご自由に。以上ですwww

サンプルAで、実際の動きを見てください。GalleryViewはデフォルトで画像サイズをいい感じに自動調整します。

画像サイズの調整

最初のカスタマイズとして、画像サイズの調整を行います。以下の記述で超簡単。

$(document).ready(function(){
	$('#gallery').galleryView({
		panel_width: 450,
		panel_height: 300,
		frame_width: 90,
		frame_height: 60
	});
});

サンプルBでご確認を。この例では、スライドショーの下にあるサムネイル（以下フィルムストリップ）も調整してます。たくさんの画像を指定すれば、デフォルトでスクロールフィルムストリップとなります。スクロールさせたくなければ、filmstrip_styleオプションを'show all'とすることで一気に表示することができます（→サンプルC）。

メインパネルとフィルムストリップの表示制御

デフォルトでは、メインパネルとフィルムストリップの構成となります。どちらかの表示だけで済む場合には、show_panelsオプションとshow_filmstripオプションで表示を制御可能。サンプルDはフィルムストリップを非表示にした例です。ちなみに、フィルムストリップだけのカルーセルギャラリーとしても利用可能です（→サンプルE）。

フィルムストリップの位置設定

filmstrip_positionオプション（bottom|top|left|right）で、上下左右にフィルムストリップを移動できます（→サンプルFとサンプルG）

キャプションの追加

スライドショーの外観ができたので、キャプションを追加します。メインパネルにオーバーレイでパネルを被せる方法と、サムネイルにキャプションを追加する方法です。画像のTITLE属性を追加して、show_captionsオプションを設定すればサムネイルにキャプションがつきます。サンプルAにもTITLE属性を指定していますが、show_captionsオプションを指定していないため表示されません。

<li><img src="img/hoge.jpg" title="HogeHoge" />
	<div class="panel-overlay">
		<h3>HogeHoge</h3>
		<p>To be, or not to be, that is the question.</p>
	</div>
</li>

これに加えて、show_captionsオプションをtrueにする必要があります。

なお、<div class="panel-overlay">という記述は、オーバーレイでパネルを被せる場合に必要なCLASS指定です。変更不可。

オーバーレイとキャプションは、サンプルHで動作を確認できます。なお、キャプションはフィルムストリップが上下の場合にのみ動作します。

オプション設定

こちら、すべて http://www.spaceforaname.com/galleryview からの引用です。

Option	Default Value	Data Type	Description
Animation Options
transition_speed	800	INT	duration of panel/frame transition (in milliseconds)
transition_interval	4000	INT	delay between panel/frame transitions (in milliseconds)
easing	’swing’	STRING	easing method to use for animations (jQuery provides ’swing’ or ‘linear’, more available with jQuery UI or Easing plugin)
pause_on_hover	false	BOOLEAN	flag to pause slideshow when user hovers over the gallery
Panel Options
show_panels	true	BOOLEAN	flag to show or hide panel portion of gallery
panel_width	600	INT	width of gallery panel (in pixels)
panel_height	400	INT	height of gallery panel (in pixels)
panel_animation	‘crossfade’	STRING	animation method for panel transitions (crossfade,fade,slide,zoomOut,none)
overlay_opacity	0.7	FLOAT	transparency for panel overlay (1.0 = opaque, 0.0 = transparent)
overlay_position	‘bottom’	STRING	position of panel overlay (bottom, top)
panel_scale	‘crop’	STRING	cropping option for panel images (crop = scale image and fit to aspect ratio determined by panel_width and panel_height, no crop = scale image and preserve original aspect ratio)
show_panel_nav	true	BOOLEAN	flag to show or hide panel navigation buttons
Filmstrip Options
show_filmstrip	true	BOOLEAN	flag to show or hide filmstrip portion of gallery
frame_width	60	INT	width of filmstrip frames (in pixels)
frame_height	40	INT	width of filmstrip frames (in pixels)
start_frame	1	INT	index of panel/frame to show first when gallery loads
filmstrip_size	3	INT	number of frames to show in filmstrip-only gallery
frame_opacity	0.3	FLOAT	transparency of non-active frames (1.0 = opaque, 0.0 = transparent)
filmstrip_style	’scroll’	STRING	type of filmstrip to use (scroll, show all)
filmstrip_position	‘bottom’	STRING	position of filmstrip within gallery (bottom, top, left, right)
show_filmstrip_nav	true	BOOLEAN	flag indicating whether to display navigation buttons
frame_scale	‘crop’	STRING	cropping option for filmstrip images (same as above)
frame_gap	5	INT	spacing between frames within filmstrip (in pixels)
show_captions	false	BOOLEAN	flag to show or hide frame captions
Pointer Options
pointer_size	8	INT	Height of frame pointer (in pixels)
animate_pointer	true	BOOLEAN	flag to animate pointer or move it instantly to target frame