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

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.flowgallery.min.js"></script>
<script>
	$(window).load(function(){
		$('#gallery').flowGallery({
			 imagePadding: 6,
			 thumbWidth: 120,
			 duration: 400
		 });
	});
</script>

//オプション一覧
activeIndex: 0,          // index of image that is initially active
animate: true,
circular: false,
enableKeyNavigation: true,   // enables forward/backward arrow keys for next/previous navigation
forwardOnActiveClick: false, // should clicking on active image, show next image?
forceWidth: false,
forceHeight: false,
backgroundColor: 'black',
thumbWidth: 'auto',
thumbHeight: 'auto',
thumbTopOffset: 'auto',  // top offset in pixels or 'auto' for centering images within list height
imagePadding: 4,         // border of active image
thumbPadding: 3,         // border of thumbnails
loadingClass: "loading", // css class applied to <li> elements of loading images
easing: 'linear',
duration: 900            // animation duration (higher value = slower speed)
<ul class="gal" id="gallery">
	<li><img src="<PATH>/img11.jpg" alt="img01" title="img01" /></li>
	<li><img src="<PATH>/img03.jpg" alt="img02" title="img02" /></li>
	<li><img src="<PATH>/img07.jpg" alt="img03" title="img03" /></li>
	<li><img src="<PATH>/img04.jpg" alt="img04" title="img04" /></li>
	<li><img src="<PATH>/img15.jpg" alt="img05" title="img05" /></li>
	<li><img src="<PATH>/img10.jpg" alt="img06" title="img06" /></li>
</ul>

FlowGalleryについて

FlowGalleryは簡単にインパクトのある画像ギャラリーを設置できるプラグインです。
オプションで細かい調整も可能です。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT or GPL
対応ブラウザ

関連するjQueryプラグイン

  • Orbit

    Orbit

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

  • cycle2

    cycle2

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

  • SlideScale

    SlideScale

    簡単に設置できる画像ギャラリー

  • simpleGal

    simpleGal

    simpleGalはとてもシンプルは画像ギャラリー

  • GalleryView

    GalleryView

    設置は簡単なのにリッチなギャラリー