HTML、jQuery）HTMLフォトギャラリー＆スライドショー（Unite Gallery版）

JavaScriptライブラリ「Unite Gallery」を使って、HTMLフォトギャラリー＆スライドショーを作成。

フォトギャラリー用のJavaScriptライブラリでは「Fotorama」「lightgallery.js」も良さそうだったが、

「Unite Gallery」が一番使いやすそうだった。「Unite Gallery」はjQueryが必要。

ギャラリーの写真は以下のものを使用。

「Unite Gallery」は、使い方がシンプルだが、デザインテーマの種類も豊富。レスポンシブ対応で、スマホではスライドショーはスワイプによる画像送りができる。

≪デザインテーマ：JUSTIFIED版≫

https://ok2nd.sakura.ne.jp/gallery/tadehara-justified.html

JUSTIFIED版では、ページサイズに合わせて、縦長、横長の画像をきれいにサイズ調整して配置してくれる。

<link rel='stylesheet' href='unitegallery/css/unite-gallery.css' type='text/css'>
<link rel='stylesheet' href='unitegallery/themes/default/ug-theme-default.css' type='text/css'>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script type='text/javascript' src='unitegallery/js/unitegallery.min.js'></script>
<script type='text/javascript' src='unitegallery/themes/tiles/ug-theme-tiles.js'></script>

<div id="gallery" style="display:none;">
<img alt="" src="thumbs/a001.jpg" data-image="photo/a001.jpg">
<img alt="" src="thumbs/a002.jpg" data-image="photo/a002.jpg">
<img alt="" src="thumbs/a003.jpg" data-image="photo/a003.jpg">
.....
</div>

<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery("#gallery").unitegallery({
		tile_enable_shadow: true,
		tile_enable_border: true,
		tiles_space_between_cols: 15,
		tiles_justified_space_between: 15,
		tiles_col_width: 235,
		tile_border_color: "#fff",
		tile_enable_outline: true,
		theme_gallery_padding: 15,
		tiles_justified_row_height: 300,
		tiles_type: "justified"
	});
});
</script>

GRID版も作成した。

≪デザインテーマ：GRID版≫

https://ok2nd.sakura.ne.jp/gallery/tadehara-grid.html

<link rel='stylesheet' href='unitegallery/css/unite-gallery.css' type='text/css'>
<link rel='stylesheet' href='unitegallery/themes/default/ug-theme-default.css' type='text/css'>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script type='text/javascript' src='unitegallery/js/unitegallery.min.js'></script>
<script type='text/javascript' src='unitegallery/themes/tilesgrid/ug-theme-tilesgrid.js'></script>

<div id="gallery" style="display:none;">
<img alt="" src="thumbs/a001.jpg" data-image="photo/a001.jpg">
<img alt="" src="thumbs/a002.jpg" data-image="photo/a002.jpg">
<img alt="" src="thumbs/a003.jpg" data-image="photo/a003.jpg">
.....
</div>

<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery("#gallery").unitegallery();
});
</script>