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

网络编程 发布日期：2024/10/5 浏览次数：1

正在浏览：使用JQuery FancyBox插件实现图片展示特效

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

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

Demo effect(image gallery):

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

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="/UploadFiles/2021-04-02/16426879675_e32ac817a8_m.jpg">





<script src="~/Scripts/jquery-2.1.4.min.js">


Demo effect(single images):


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


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="/UploadFiles/2021-04-02/15783866983_27160395b9_m.jpg">





<script src="~/Scripts/jquery-2.1.4.min.js">


Demo effect(thumbnail):


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


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="/UploadFiles/2021-04-02/16346747871_60b27a54b9_m.jpg">





<script src="~/Scripts/jquery-2.1.4.min.js">


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


        

        

            
上一篇：跟我学习javascript的函数和函数表达式

            
下一篇：uploadify多文件上传参数设置技巧

        

        
一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”：键盘需配有Copilot物理按键
几个月来，英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法，朝着更多的AI功能迈进。在近日，英特尔在台北举行的开发者活动中，也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。