menu

Creative Demos

jQuery:レスポンシブ対応のlightbox系プラグインfancybox

  • サムネイル画像クリックで大きい方の画像をモーダルウィンドウで表示
  • Next/Prevの実装
  • windowサイズに合わせてポップアップするイメージが自動で調整されるのでスマホやipadなどのタブレットなどにも対応する。

html

  • head内でjqueryの読み込み
  • fancyboxのフォルダを丸ごと読み込んで必要箇所だけ使うのが簡単です。今回はCSSと画像なども合わせて利用しています。
              <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
              <script src="fancybox/jquery.fancybox.js"></script>
              <link rel="stylesheet" href="fancybox/jquery.fancybox.css">
              
  • a要素にclass="fancybox"
  • rel="group"でリスト化した画像がグループ化され、NextPrevのボタンが実装される。記述しないと非表示になる
  • リンク先a要素に大きい画像、img要素にサムネイルとなる画像
              <ul>
                <li><a class="fancybox" rel="group" href="img/b01.jpg"><img src="img/01.jpg" alt=""></a></li>
                <li><a class="fancybox" rel="group" href="img/b02.jpg"><img src="img/02.jpg" alt=""></a></li>
                <li><a class="fancybox" rel="group" href="img/b03.jpg"><img src="img/03.jpg" alt=""></a></li>
                <li><a class="fancybox" rel="group" href="img/b04.jpg"><img src="img/04.jpg" alt=""></a></li>
                <li><a class="fancybox" rel="group" href="img/b05.jpg"><img src="img/05.jpg" alt=""></a></li>
                <li><a class="fancybox" rel="group" href="img/b06.jpg"><img src="img/06.jpg" alt=""></a></li>
                <li><a class="fancybox" rel="group" href="img/b07.jpg"><img src="img/07.jpg" alt=""></a></li>
                <li><a class="fancybox" rel="group" href="img/b08.jpg"><img src="img/08.jpg" alt=""></a></li>
                <li><a class="fancybox" rel="group" href="img/b09.jpg"><img src="img/09.jpg" alt=""></a></li>
              </ul>
              

javascript

  • 非常にシンプルなjs
              $(function() {

                $(document).ready(function() {
                  $(".fancybox").fancybox();
                });

              })
              

オプション等は作者サイト参照ください。

http://fancyapps.com/fancybox/