一个基于jquery的Lightbox插件fantybox

2022-11-16 0 232



一个基于jquery的Lightbox插件fantybox

支持向放大的图像添加阴影,并向一组相关图像添加导航按钮。fanybox是一个华丽的jquery弹出显示插件。该灯箱可以显示图像以及iframed内容,并使用css自定义外观。

一个基于jquery的Lightbox插件fantybox

官方网站:http://www.fancybox.net/home

 

下载地址:https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/fancybox/jquery.fancybox-1.3.4.zip

 

使用示例:

 

1、引入Jquery文件

 

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js”></script>

<script type=”text/javascript” src=”/fancybox/jquery.fancybox-1.3.4.pack.js”></script>

 

2、引入Fancybox样式文件

 

<link rel=”stylesheet” href=”/fancybox/jquery.fancybox-1.3.4.css” type=”text/css” media=”screen” />

 

3、在需要使用Fancybox的图片中加上属性

 

<a class=”grouped_elements” rel=”group1″ href=”image_big_1.jpg”><img src=”image_small_1.jpg” alt=””/></a>

<a class=”grouped_elements” rel=”group1″ href=”image_big_2.jpg”><img src=”image_small_2.jpg” alt=””/></a>

 

<a class=”grouped_elements” rel=”group2″ href=”image_big_3.jpg”><img src=”image_small_3.jpg” alt=””/></a>

<a class=”grouped_elements” rel=”group2″ href=”image_big_4.jpg”><img src=”image_small_4.jpg” alt=””/></a>

 

4、JS文件控制:

 

<script type=”text/javascript”>

jQuery(document).ready(function ($) {

$(“a[rel=group1]”).fancybox({

‘titleShow’: true,

‘transitionIn’: ‘none’,

‘showNavArrows’: true,

‘transitionOut’: ‘none’

});

})

</script>

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!cheeksyu@vip.qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!
5.严禁将资源用于任何违法犯罪行为,不得违反国家法律,否则责任自负,一切法律责任与本站无关

源码下载

发表评论
暂无评论