Blueimp Gallery

クラス名blueimp-galleryをすべてjgalleryに変更してカストマイズした。下記に埋め込みカルーセルを例示する。

‹ ›

/assets/css/gallery.css　カスタムページで併用するmBanner, jpopupほかレイアウト用CSSを追加。
運用サイトでは、/styles.css に追加した。
/assets/js/gallery.js　v1.10.0　元のコードを変更し、
デフォールトにdocument.getElementById('photos').onclickコードを追加した。
この例では、カスタムフィールドEntryStyleを gallery にした。

<script>
  document.getElementById('photos').onclick = function (event) {
    event = event || window.event;
    var target = event.target || event.srcElement,
        link = target.src ? target.parentNode : target,
        options = {index: link, event: event},
        photos = this.getElementsByTagName('a');
    blueimp.Gallery(photos, options);
  };
</script>

HTMLソース例

<div id="photo-carousel" class="jgallery jgallery-carousel">
  <div class="slides"></div>
  <h3 class="title"></h3>
  <a class="prev">‹</a>
  <a class="next">›</a>
  <a class="play-pause"></a>
</div>
<div id="photos" class="x10">
  <a href="/assets/img/001.jpg"><img src="/assets/img/thumb/001.jpg"></a>
  <a href="/assets/img/002.jpg"><img src="/assets/img/thumb/002.jpg"></a>
  <a href="/assets/img/003.jpg"><img src="/assets/img/thumb/003.jpg"></a>
</div>
<script src="/assets/js/gallery.js"></script>

サムネールをクリックしてカルーセル表示するときは、つぎのコードを書く。

<div id="jgallery" class="jgallery"><div class="slides"></div><h3 class="title"></h3><a class="prev">‹</a><a class="next">›</a><a class="close">×</a><a class="play-pause"></a><ol class="indicator"></ol></div>

‹›×