JQueryのFancyBoxプラグインで画像表示機能を実現

今回はJQueryのFancyBoxプラグインの画像表示機能についてご紹介します。FancyBoxプラグインの注意点について、以下で実際のケースを見てみましょう。

FancyBox は、画像、HTML コンテンツ、マルチメディア を表示するためのライトボックス ツールです。

jquery プラグインのファンシーボックス ポップアップ ボックス効果は、一般的なライトボックス プラグインに似ており、単一の画像または画像のグループを表示でき、カスタマイズされたコンテンツやロードされた外部ファイルのコンテンツも表示できます。 ajaxなどによる機能も非常に便利で実用的です。

デモ効果(画像ギャラリー):

サンプルコード:

<link href="~/Content/jquery.fancybox.css" rel="stylesheet" />
<p>
  <h2>First test(Image gallery)</h2>
  <a class="fancybox1" rel="group" href="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_b.jpg"><img src="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_m.jpg" alt="" /></a>
  <a class="fancybox1" rel="group" href="http://farm8.staticflickr.com/7308/15783866983_27160395b9_b.jpg"><img src="http://farm8.staticflickr.com/7308/15783866983_27160395b9_m.jpg" alt="" /></a>
</p>

<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
      $(".fancybox1").fancybox();      
    });
</script>

デモ効果(単一画像):

サンプルコード:

<link href="~/Content/jquery.fancybox.css" rel="stylesheet" />
<p>
  <h2>Single images</h2>
  <a id="single_1" href="http://farm8.staticflickr.com/7308/15783866983_27160395b9_b.jpg" title="Lupines (Kiddi Einars)">
    <img src="http://farm8.staticflickr.com/7308/15783866983_27160395b9_m.jpg" alt="" />
  </a>
  <a id="single_2" href="http://farm8.staticflickr.com/7475/15723733583_b4a7b52459_b.jpg" title="Colorful Feldberg II (STEFFEN EGLY)">
    <img src="http://farm8.staticflickr.com/7475/15723733583_b4a7b52459_m.jpg" alt="" />
  </a>
  <a id="single_3" href="http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_b.jpg" title="Cannon Needles (JustinPoe)">
    <img src="http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_m.jpg" alt="" />
  </a>
  <a id="single_4" href="http://farm8.staticflickr.com/7381/16327260776_c3fa8ee76d_b.jpg" title="Making a summer # 3 :) ((Nikon woman))">
    <img src="http://farm8.staticflickr.com/7381/16327260776_c3fa8ee76d_m.jpg" alt="" />
  </a>
</p>

<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
      $("#single_1").fancybox({
        helpers: {
          title: {
            type: 'float'
          }
        }
      });
      $("#single_2").fancybox({
        openEffect: 'elastic',
        closeEffect: 'elastic',
        helpers: {
          title: {
            type: 'inside'
          }
        }
      });
      $("#single_3").fancybox({
        openEffect: 'none',
        closeEffect: 'none',
        helpers: {
          title: {
            type: 'outside'
          }
        }
      });
      $("#single_4").fancybox({
        helpers: {
          title: {
            type: 'over'
          }
        }
      });      
    });
  </script>

読んだ後の方法この記事のケースについては、さらに興味深い情報については、php 中国語 Web サイトの他の関連記事にご注目ください。

推奨読書: 動的なデジタル表示効果を実現する

jquery+php

jQueryアニメーション効果画像カルーセル実装(コード付き)

以上がJQueryのFancyBoxプラグインで画像表示機能を実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。