Magnific Popup

Image, Inline, Gallery機能だけを実装した。スライドショー表示機能はない。
拡大と同時にスライドショー表示したいときはfancybox.js (またはfbox.js)を使う。

jquery.js, gallery.js, gallery.css を使用する。
gallery初期設定は gallery.js に追加し、クラス名を gallery にした。
gallery.jsはページの最後(bodyタグの前）で呼び出す。
jpopupと類似しているが、キーボードの←→を使って写真を移動できる。

Gallery Popup

Inline Popup

Inline　<a class="inline" href="#dialog" >Inline</a>

Zoom　<a class="zoom" href="#dialog" >Zoom</a>

  <div id="dialog" class="zoom-dialog mfp-hide">
    ここに表示するHTMLコードを書く
  </div>

<link rel="stylesheet" href="/assets/css/gallery.css">
<script src="/assets/js/jquery.js"></script>
.....
<div class="gallery">
<a href="001.jpg" title="The Cleaner"><img src="001s.jpg"></a>
<a href="002.jpg" title="Winter Dance"><img src="002s.jpg"></a>
<a href="003.jpg" title="Uninvited Guest"><img src="003s.jpg"></a>
.....
</div>
.....
<script src="gallery.js"></script>

〔gallery初期設定〕
 <script>
   $('.gallery').magnificPopup({
     delegate: 'a',
     type: 'image',
     tLoading: 'Loading image #%curr%...',
     mainClass: 'mfp-img-mobile',
     gallery: {
       enabled: true,
       navigateByImgClick: true,
       preload: [0,1]
     }
   });
 </script>

Image Popup

　<a class="image" href="path-to-image.jpg">～</a>
　ポップアップ画像をクリックしても閉じる。
　closeBtnInside: true

　※余分なコードを削除したものを、gallery.min.js(19kb), gallery.min.css(7kb) とした。

Zoom Animation

Zoomクラスを作成した。Inlineポップアップをアニメーションにする。
zoom.js (gallery.jsにInline Zoomを追加) と zoom.css を呼び出す。

Open with fade-zoom animation

Dialog example

This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.