• img01
  • img02
  • img03
  • img04
  • img05
  • img06
  • img07
  • img08
  • img09
  • img10
  • img11
  • img12
  • img13
  • img14

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/jquery.galleryview-3.0-dev.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.timers-1.2.js"></script>
<script src="<PATH>/jquery.easing.1.3.js"></script>
<script src="<PATH>/jquery.galleryview-3.0-dev.js"></script>
<script>
	$(window).load(function(){
		$('#myGallery').galleryView({
			panel_width: 400,
			panel_height: 250
		});
	});
</script>

//オプション一覧
// General Options
transition_speed: 1000, 		//INT - duration of panel/frame transition (in milliseconds)
transition_interval: 5000, 		//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)

// Panel Options
show_panels: true, 				//BOOLEAN - flag to show or hide panel portion of gallery
show_panel_nav: true, 			//BOOLEAN - flag to show or hide panel navigation buttons
enable_overlays: false, 			//BOOLEAN - flag to show or hide panel overlays
panel_width: 800, 				//INT - width of gallery panel (in pixels)
panel_height: 400, 				//INT - height of gallery panel (in pixels)
panel_animation: 'fade', 		//STRING - animation method for panel transitions (crossfade,fade,slide,none)
panel_scale: 'crop', 			//STRING - cropping option for panel images (crop = scale image and fit to aspect ratio determined by panel_width and panel_height, fit = scale image and preserve original aspect ratio)
overlay_position: 'bottom', 	//STRING - position of panel overlay (bottom, top)
pan_images: false,				//BOOLEAN - flag to allow user to grab/drag oversized images within gallery
pan_style: 'drag',				//STRING - panning method (drag = user clicks and drags image to pan, track = image automatically pans based on mouse position
pan_smoothness: 15,				//INT - determines smoothness of tracking pan animation (higher number = smoother)

// Filmstrip Options
start_frame: 1, 				//INT - index of panel/frame to show first when gallery loads
show_filmstrip: true, 			//BOOLEAN - flag to show or hide filmstrip portion of gallery
show_filmstrip_nav: true, 		//BOOLEAN - flag indicating whether to display navigation buttons
enable_slideshow: true,			//BOOLEAN - flag indicating whether to display slideshow play/pause button
autoplay: false,				//BOOLEAN - flag to start slideshow on gallery load
show_captions: false, 			//BOOLEAN - flag to show or hide frame captions	
filmstrip_size: 3, 				//INT - number of frames to show in filmstrip-only gallery
filmstrip_style: 'scroll', 		//STRING - type of filmstrip to use (scroll = display one line of frames, scroll filmstrip if necessary, showall = display multiple rows of frames if necessary)
filmstrip_position: 'bottom', 	//STRING - position of filmstrip within gallery (bottom, top, left, right)
frame_width: 80, 				//INT - width of filmstrip frames (in pixels)
frame_height: 40, 				//INT - width of filmstrip frames (in pixels)
frame_opacity: 0.4, 			//FLOAT - transparency of non-active frames (1.0 = opaque, 0.0 = transparent)
frame_scale: 'crop', 			//STRING - cropping option for filmstrip images (same as above)
frame_gap: 5, 					//INT - spacing between frames within filmstrip (in pixels)

// Info Bar Options
show_infobar: true,				//BOOLEAN - flag to show or hide infobar
infobar_opacity: 1				//FLOAT - transparency for info bar
<ul id="myGallery">
	<li><img src="<PATH>/img14.jpg" alt="img01" /></li>
	<li><img src="<PATH>/img01.jpg" alt="img02" /></li>
	<li><img src="<PATH>/img02.jpg" alt="img03" /></li>
	<li><img src="<PATH>/img03.jpg" alt="img04" /></li>
	<li><img src="<PATH>/img04.jpg" alt="img05" /></li>
	<li><img src="<PATH>/img05.jpg" alt="img06" /></li>
	<li><img src="<PATH>/img06.jpg" alt="img07" /></li>
	<li><img src="<PATH>/img07.jpg" alt="img08" /></li>
	<li><img src="<PATH>/img08.jpg" alt="img09" /></li>
	<li><img src="<PATH>/img09.jpg" alt="img10" /></li>
	<li><img src="<PATH>/img10.jpg" alt="img11" /></li>
	<li><img src="<PATH>/img11.jpg" alt="img12" /></li>
	<li><img src="<PATH>/img12.jpg" alt="img13" /></li>
	<li><img src="<PATH>/img13.jpg" alt="img14" /></li>
</ul>

GalleryViewについて

GalleryViewはなかなかすごい画像ギャラリーです。
とても簡単なHTMLで多機能な画像ギャラリーが設置可能です。
ドキュメントが少ないので、自分でどんどんカスタマイズしていきましょう。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • cycle2

    cycle2

    非常に多機能な画像ギャラリー

  • least

    least

    印象的な画像ギャラリーを設置することができる

  • Orbit

    Orbit

    画像の切り替えタイミングを見た目で表示できる画像ギャラリー

  • ArtDesignSlider

    ArtDesignSlider

    ArtDesign Sliderはシンプルながらもクールなデザインの画像ギャラリー

  • JustifiedGallery

    JustifiedGallery

    画像を隙間なく配置してくれる