fancybox3图片浮窗增强jQuery插件

2019-9-30 / 0 评论 网站特效 / 思源哥哥

本文共计 2242 字,感谢您的耐心浏览与评论.

介绍:用于呈现各种类型媒体的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插件


0条回应:“fancybox3图片浮窗增强jQuery插件”


发表评论