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

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等主流浏览器)

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, fancybox
图片展示
jquery fancybox 插件、jquery图片展示特效、jquery相册展示特效、jquery个人展示特效、jquery 图片展示插件,以便于您获取更多的相关知识。

时间: 2024-10-03 15:37:14

使用JQuery FancyBox插件实现图片展示特效_jquery的相关文章

jQuery+PHP实现动态数字展示特效_jquery

HTML 本例假设要在页面上动态展示(无需刷新整个页面,只是局部刷新动态数字)当前在线用户数,常见在一些统计平台上应用.在HTML页面中只需定义以下结构: 复制代码 代码如下: <div class="count">当前在线:<span id="number"></span></div> jQuery 首先我们要定义一个动画过程,使用jQuery的animate()函数实现从一个数字到另一个数字的变换过程,以下magi

完美兼容各大浏览器的jQuery插件实现图片切换特效_jquery

文件里面的功能注释也写得非常详细(详见zoeDylan.ImgChange-1.0.1.js文件),对网友们的学习是很有帮助的,虽然样式不太好看,大家可以自己写,好好利用哦... JS代码部分: 复制代码 代码如下: (function ($) {     var//申明全局变量         _eleTemp,//缓存变量         _eleThis = $(this),//当前元素         _eleImg = $('.zd-imgChange-img'),//图片组元素   

jQuery Jcrop插件实现图片选取功能_jquery

总的来说,原理很简单,大致流程是:在浏览器上加载原图 --> 用矩形框在原图上选取区域并将选取的顶点坐标和矩形尺寸发送至服务器 --> 服务器端用图片切割算法切割原图并输出切割后的图片.下面我们就分别对这几个步骤详细展开讨论分析,并在最后附上小demo供大家参考. 1.在页面上加载原图 这个就不用多说了,就是在页面上显示一张图片,一个img标签搞定,不过为了下一步演示,还是贴一下代码 <img src="girl.jpg" alt="" id=&q

凡客诚品带滚动条图片展示特效

  如果现在比较专业的商城,估计凡客算是其中之一了,像当当及京东都变得啥都有了.看到凡客那么多照片,我就在想一件事,究竟得请多少人去拍照片,整理照片,还要有多少模特,不愧是大公司.今天我们进入凡客的丝袜频道(http://stockings.vancl.com/),相信许多男生喜欢这里.在这里,我们可以看到许多长腿美女.当我们把页面拉到最下面时(这个过程浏览器有点卡,估计是加载的东西太多了..),我们可以看到凡客一个很有特色的图片展示特效: 细心的朋友估计会注意到下面的滚动条,以前我们做过许多带

使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体_jquery

模态窗体已经成为Web开发人员设计界面时经常要使用的传输数据的方式.通过模态窗口,可以提高网站的可用性.正好项目的需要,有个客户想要模态弹出的窗体来提交网站的反馈,经过一番测试实现了,我使用jQuery fancybox插件来创建一个漂亮的模态窗体,提交表单的数据在服务器端实现Ajax调用.你可以在你的邮件里收到用户发送的反馈消息 html代码 header部分主要的JS文件如下引入jquery代码和fancybox代码 复制代码 代码如下: <script type="text/java

jQuery插件expander实现图片翻转特效_jquery

分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 引入CSS和JS <link href="css/expander.css" rel="stylesheet"> <link href="css/theme.css" rel="stylesheet"> <script src="js/j

jQuery插件slick实现响应式移动端幻灯片图片切换特效_jquery

jQuery响应式手机端移动端幻灯片图片切换特效插件slick,基于jQuery,功能非常强大,支持左右按钮切换.支持圆点切换.支持自定义切换数量,支持自定义切换速度.支持图片预加载.支持自动播放定义,效果非常的不错,众多的参数自定义支持,觉得可以的可以参考他们的参数配置,还是值得学习使用的. 使用方法: 1.加载插件和jQuery <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> &l

jQuery插件实现无缝滚动特效_jquery

首先来看下html骨架,如下: <div class="box"> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </div> 结构简单明了,没什么说的. 讲下实现原理: div box是最外层盒子,给它指定的宽高,记得给box添加一个 overflow:hidden (超出的内容隐藏)样式,因为滚动肯定是会超出b

jQuery+CSS制作的图片展示效果

jQuery+CSS的图片展示效果,可以拖动图片,兼容浏览器,可以做成个人相册或者作品展示 摆放效果 点击效果 Dome Download