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>