素材牛VIP会员

jQuery多功能弹出层插件fancyBox

 所属分类:网页特效-对话框/灯箱/提示,悬浮层/弹出层

 浏览:1514次-  下载:2次-  评论:0次-  更新时间:2016-10-07
jQuery多功能弹出层插件fancyBox兼容IE6
积分说明:注册即送15牛币,每日签到可获得5牛币,成为VIP会员可永久免积分下载!   充值积分   充值会员   更多说明»
项目地址(website):http://fancyapps.com/fancybox/
素材描述:jQuery 弹出窗口,点击弹出对话框。可用于点击小图片弹出大图(带操作选项的)。可操作: Ajax Iframe Inline SWF

详细介绍

使用方法:

引入jQuery库文件、插件JS文件、CSS样式文件

<!-- Add jQuery library -->
<script type="text/javascript" src="lib/jquery-1.10.2.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="lib/jquery.mousewheel.pack.js?v=3.1.3"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="source/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

插件初始化、参数配置

$('.fancybox').fancybox();

HTML结构

<p>
    <a class="fancybox" href="demo/1_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="demo/1_s.jpg" alt="" /></a>
    <a class="fancybox" href="demo/2_b.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"><img src="demo/2_s.jpg" alt="" /></a>
    <a class="fancybox" href="demo/3_b.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon"><img src="demo/3_s.jpg" alt="" /></a>
    <a class="fancybox" href="demo/4_b.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno"><img src="demo/4_s.jpg" alt="" /></a>
</p>

其他的调研方法、配置请参照演示,有Ajax、Iframe、Inline、SWF,非常的实用

相关素材 - 对话框/灯箱/提示,悬浮层/弹出层

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:2
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)