このプラグインの実際の動きを確認したい場合は、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プラグイン

  • desSlideshow

    desSlideshow

    一味違う画像ギャラリー

  • Rondell

    Rondell

    奥行きのある画像ギャラリーが設置できる

  • PresentationCycle

    PresentationCycle

    画像の切り替わるタイミングをバーで表示できる画像ギャラリー

  • Craftyslide

    Craftyslide

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

  • least

    least

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