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

  • files
  • js
  • html
<link href="<PATH>/justifiedGallery.min.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.justifiedGallery.min.js"></script>
<script>
	$(window).load(function(){
		$('#JustifiedGalleryBtn01').on('click', function(){
			$('body').append('<div id="JustifiedGalleryDemoLayer"><p class="title">画面サイズを変えると画像サイズと配置も動的に変更されます</p><button class="red" id="JustifiedGalleryBtn02">閉じる</button></div>');
			$('#JustifiedGalleryDemo').appendTo($('#JustifiedGalleryDemoLayer'));
			$('#JustifiedGalleryDemoLayer').fadeIn(500, function(){
				$('#JustifiedGalleryDemo').fadeIn();
			});
			$('#JustifiedGalleryBtn02').one('click', function(){
				$('#JustifiedGalleryDemoLayer').fadeOut(300, function(){
					$('#JustifiedGalleryDemo').insertAfter($('#JustifiedGalleryBtn01')).hide();
					$(this).remove();
				});
			});
		});
		$('#JustifiedGalleryDemo').justifiedGallery({
			rowHeight: 150,
			margins: 5,
			sizeRangeSuffixes : {
				lt100 : '', 
				lt240 : '', 
				lt320 : '', 
				lt500 : '', 
				lt640 : '', 
				lt1024 : ''
			}
		});
	});
</script>
<button id="JustifiedGalleryBtn01" class="blue">JustifiedGalleryしてみる</button>

<div id="JustifiedGalleryDemo">
	<a href="<PATH>/img05.jpg">
		<img src="<PATH>/img05.jpg" />
		<div class="caption">
			caption用の要素を設定すればこんな<span style="color:#8C0000;">キャ</span><span style="color:#658193;">プ</span><span style="color:#ecd16f;">ショ</span><span style="color:#3c948b;">ン</span>も
		</div>
	</a>
	<a href="<PATH>/img06.jpg" title="クリリンのことか・・・クリリンのことか ――― っ!!!!"><img src="<PATH>/img06.jpg" /></a>
	<a href="<PATH>/img07.jpg" title="きさまといた数ヶ月・・わ・・わるく・・なかったぜ・・・"><img src="<PATH>/img07.jpg" /></a>
	<a href="<PATH>/img08.jpg"><img alt="がんばれカカロット・・・おまえがナンバー1だ!!" src="<PATH>/img08.jpg" /></a>
	<a href="<PATH>/img09.jpg"><img alt="どうしたのだ?さっきまでの勢いは…笑えよ、ベジータ" src="<PATH>/img09.jpg" /></a>
	<a href="<PATH>/imgd06.jpg" title="今のは痛かった…痛かったぞーーー!!!"><img src="<PATH>/imgd06.jpg" /></a>
	<a href="<PATH>/imgd07.jpg" title="トランクス…ブルマを…ママを大切にしろよ…"><img src="<PATH>/imgd07.jpg" /></a>
	<a href="<PATH>/imgd08.jpg"><img alt="俺がスーパーベジータだ・・・!!" src="<PATH>/imgd08.jpg" /></a>
	<a href="<PATH>/imgd09.jpg"><img alt="ずどどえやぁああすぽぽー" src="<PATH>/imgd09.jpg" /></a>
	<a href="<PATH>/img12.jpg" title="実はわたくし.....亀なんです。"><img src="<PATH>/img12.jpg" /></a>
	<a href="<PATH>/img13.jpg" title="おまえには鼻がないじゃないか!!"><img src="<PATH>/img13.jpg" /></a>
	<a href="<PATH>/img14.jpg"><img alt="きさまなど手も足も使わずベロだけでたおしてみせよう" src="<PATH>/img14.jpg" /></a>
	<a href="<PATH>/img15.jpg"><img alt="つらぬけーーーーーーーーーーっ!!!" src="<PATH>/img15.jpg" /></a>
	<a href="<PATH>/imgd10.jpg" title="悟空ーーーーーーーー!!!!はやくきてくれーーーーーーーー!!"><img src="<PATH>/imgd10.jpg" /></a>
	<a href="<PATH>/imgd11.jpg" title="はじけてまざれ!!!"><img src="<PATH>/imgd11.jpg" /></a>
	<a href="<PATH>/imgd12.jpg"><img alt="へっ!きたねえ花火だ" src="<PATH>/imgd12.jpg" /></a>
	<a href="<PATH>/imgd13.jpg"><img alt="わたしの戦闘力は530000です" src="<PATH>/imgd13.jpg" /></a>
	<a href="<PATH>/imgd14.jpg"><img alt="もっもどった!!もどったぞーーーっ!!!サンキュードラゴンボール!!!!" src="<PATH>/imgd14.jpg" /></a>
</div>

JustifiedGalleryについて

JustifiedGalleryは、画像を隙間なく配置してくれるプラグインです。
画面いっぱいに画像を敷き詰めて表示したりするとインパクトのあるサイトが出来そうですね。
プラグイン単体ではモーダルウィンドウ機能をもっていないので、画像クリックでモーダルウィンドウを表示したい場合は、別途プラグインを利用する必要があります。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • GalleryView

    GalleryView

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

  • ExcoloSlider

    ExcoloSlider

    シンプルなレスポンシブ対応の画像ギャラリー

  • Orbit

    Orbit

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

  • simpleGal

    simpleGal

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

  • Rondell

    Rondell

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