2014年10月30日

サムネイル画像と詳細画像が別に設定できるスライダー


表題の通りなのですが、サムネイル画像と詳細画像が別に設定できるスライダーを探しています。
やりたいことは特別ではなくて、サムネイル付きのスライダーです。


縦方向でも横方向でもいいのですが、複数のサムネイルが動く部分と、切り替わる大きな一枚画像が表示される部分があればいいのです。

スライダー機能を有するjqueryモジュールそれこそ星の数ほどありますが(大げさか)、通常は大きな画像のみを用意して、サムネイルはそれを縮小したものを表示する方式が一般的です。これはこれでサムネイルを作成する手間が省けますし、ディスク容量の節約にもなります。

写真の場合にはそれで問題ないでしょうが、バナーの場合は文字がありますので、サムネイルにはサムネイル用のデザインを、大きな画像にはそれなりのデザインをしたい要望があるのです。

ネット検索したのですが、見つけられたのは「jquery.galleryview」だけでした。
ところがこのjquery.galleryviewは最新バージョン(3.0)だとサムネイルを別に指定することができません。古い「jquery.galleryview-1.1」だと対応しているようなのですが、公式サイトでは旧バージョンは配布していないようです。jQuery Pluginsのサイトを探してみたのですがありませんでした。

結局、一般サイトで「Jquery.Galleryview-1.1」を使用しているところを見つけ、そこからダウンロードしてしまいました。
これは権利的にアウトなのでしょうか? 最新バージョンのライセンスを見ると再配布可能なようですが。

今も代替ソフトを探しています。

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

0 件のコメント:

コメントを投稿