使用JQuery FancyBox插件实现图片展示特效

前端技术 2023/09/09 JavaScript

FancyBox是一个用于显示图像，HTML内容和多媒体的lightbox工具。

jquery插件之fancybox弹出框特效，与广为人之的lightbox插件比较类拟,可以展示单张图片，也可展示一组图片，它还可以展示自定义的内容与ajax载入外部文件的内容等，功能也是很方便与实用的。

Demo effect(image gallery):

Sample code:

<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>

Demo effect(single images):

Sample code:

<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>

Demo effect(thumbnail):

Sample code:

<link href=\"~/Content/jquery.fancybox.css\" rel=\"stylesheet\" />
<link href=\"~/Content/jquery.fancybox-thumbs.css\" rel=\"stylesheet\" />
<p>
  <h2>Thumbnail helper</h2>
  <a class=\"fancybox-thumb\" rel=\"fancybox-thumb\" href=\"http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_b.jpg\" title=\"Bråviken (jarnasen)\">
    <img src=\"http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_m.jpg\" alt=\"\" />
  </a>
  <a class=\"fancybox-thumb\" rel=\"fancybox-thumb\" href=\"http://farm8.staticflickr.com/7381/16327260776_c3fa8ee76d_b.jpg\" title=\"From the garden (*Jilltoo)\">
    <img src=\"http://farm8.staticflickr.com/7381/16327260776_c3fa8ee76d_m.jpg\" alt=\"\" />
  </a>
  <a class=\"fancybox-thumb\" rel=\"fancybox-thumb\" href=\"http://farm9.staticflickr.com/8591/16141566979_347348e72c_b.jpg\" title=\"cold forest (picturesbywalther)\">
    <img src=\"http://farm9.staticflickr.com/8591/16141566979_347348e72c_m.jpg\" alt=\"\" />
  </a>
  <a class=\"fancybox-thumb\" rel=\"fancybox-thumb\" href=\"http://farm3.staticflickr.com/2895/14503817856_2f5d4b667b_b.jpg\" title=\"Holly blue (Masa_N)\">
    <img src=\"http://farm3.staticflickr.com/2895/14503817856_2f5d4b667b_m.jpg\" alt=\"\" />
  </a>
</p>


<script src=\"~/Scripts/jquery-2.1.4.min.js\"></script>
<script src=\"~/Scripts/jquery.fancybox.pack.js\"></script>
  <script src=\"~/Scripts/jquery.fancybox-thumbs.js\"></script>
  <script type=\"text/javascript\">
    $(document).ready(function () {
      $(\".fancybox-thumb\").fancybox({
        prevEffect: \'elastic\',
        nextEffect: \'elastic\',
        helpers: {
          title: {
            type: \'inside\'
          },
          thumbs: {
            width: 50,
            height: 50
          }
        }
      });
    });
  </script>

以上就是3款jQuery插件fancybox图片放大展示效果网页特效，应用简单，兼容IE6老版本级别浏览器。图片放大只适应大小并自动窗口居中显示。（兼容测试：IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器）

本文地址：https://www.stayed.cn/item/24148

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案