消えた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タグ内で読み込みます。

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

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

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

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

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

画像サイズの調整

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

サンプル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オプションを指定していないため表示されません。

これに加えて、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

スポンサードリンク