fancybox3图片浮窗增强jQuery插件

【摘要】 介绍:用于呈现各种类型媒体的javascript lightbox库。响应灵敏,触控灵活,可定制。3.0主要就是功能多且美观官方给出的最快使用方法<!-- 1.&n......

介绍:用于呈现各种类型媒体的javascript lightbox库。响应灵敏,触控灵活,可定制。

3.0主要就是功能多且美观

官方给出的最快使用方法

<!-- 1. Add latest jQuery and fancybox files -->

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

<!-- 2. Create links -->
<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
<a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>

<!-- 3. Have fun! -->

但是美中不足,我们希望内容文章图片直接增加属性还需要写一句代码

<script>
$('.message img').parent('a').attr('data-fancybox','gallery');
</script>
这里的.message 是文章的class类 也可以是id根据网页自己修改

程序源码下载:https://codeload.github.com/fancyapps/fancybox/zip/master

官方地址:https://fancyapps.com/fancybox/3

过于简单,就不写什么插件了。

貌似忘记加预览效果了

效果图.jpg

此代码于本文无关

$("a[href$=jpg],a[href$=jpeg],a[href$=gif],a[href$=png]").addClass("swipebox").attr('rel','');


本文标签: JS实例 jQuery
版权声明:《 fancybox3图片浮窗增强jQuery插件 》为作者 思源哥哥原创文章,转载请注明原文地址!
最后编辑:2019-9-30 16:09:56
免责声明:思源资源网提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件(y@isiyuan.net)与我们联系处理。
分享到:
打赏
评论 (0)