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

351 阅读 0 评论 232 点赞

我是靠谱客的博主贤惠小鸭子，这篇文章主要介绍使用JQuery FancyBox插件实现图片展示特效，现在分享给大家，希望可以做个参考。

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://www.uoften.com/uploadfile/2018/0411/20180411020126519.jpg"><img src="http://www.uoften.com/uploadfile/2018/0411/20180411020126337.jpg" alt="" /></a>
  <a class="fancybox1" rel="group" href="http://www.uoften.com/uploadfile/2018/0411/20180411020126813.jpg"><img src="http://www.uoften.com/uploadfile/2018/0411/20180411020127189.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://www.uoften.com/uploadfile/2018/0411/20180411020126813.jpg" title="Lupines (Kiddi Einars)">
    <img src="http://www.uoften.com/uploadfile/2018/0411/20180411020127189.jpg" alt="" />
  </a>
  <a id="single_2" href="http://www.uoften.com/uploadfile/2018/0411/20180411020127893.jpg" title="Colorful Feldberg II (STEFFEN EGLY)">
    <img src="http://www.uoften.com/uploadfile/2018/0411/20180411020128242.jpg" alt="" />
  </a>
  <a id="single_3" href="http://www.uoften.com/uploadfile/2018/0411/20180411020128684.jpg" title="Cannon Needles (JustinPoe)">
    <img src="http://www.uoften.com/uploadfile/2018/0411/20180411020128550.jpg" alt="" />
  </a>
  <a id="single_4" href="http://www.uoften.com/uploadfile/2018/0411/20180411020129534.jpg" title="Making a summer # 3 :) ((Nikon woman))">
    <img src="http://www.uoften.com/uploadfile/2018/0411/20180411020129350.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://www.uoften.com/uploadfile/2018/0411/20180411020128684.jpg" title="Bråviken (jarnasen)">
    <img src="http://www.uoften.com/uploadfile/2018/0411/20180411020128550.jpg" alt="" />
  </a>
  <a class="fancybox-thumb" rel="fancybox-thumb" href="http://www.uoften.com/uploadfile/2018/0411/20180411020129534.jpg" title="From the garden (*Jilltoo)">
    <img src="http://www.uoften.com/uploadfile/2018/0411/20180411020129350.jpg" alt="" />
  </a>
  <a class="fancybox-thumb" rel="fancybox-thumb" href="http://www.uoften.com/uploadfile/2018/0411/20180411020129989.jpg" title="cold forest (picturesbywalther)">
    <img src="http://www.uoften.com/uploadfile/2018/0411/20180411020130538.jpg" alt="" />
  </a>
  <a class="fancybox-thumb" rel="fancybox-thumb" href="http://www.uoften.com/uploadfile/2018/0411/20180411020130765.jpg" title="Holly blue (Masa_N)">
    <img src="http://www.uoften.com/uploadfile/2018/0411/20180411020132744.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等主流浏览器）