闲篇-利用fancybox插件做一个图片弹窗工具

2,561次阅读
2条评论

该文章最后更新于2024-04-25 10:44,某些内容具有时效性,若有错误或已失效,请谅解!

最近公司的古董项目中有用到这款插件,就查找了一下相关资料和用法,下面是一些基本的简单用法,比较容易掌握,有需要的小伙伴可以参考。

FancyBox相较来说 算是非常老的一款弹窗工具了,站长一直使用到现在的主要原因是懒得重构了。

FancyBox是一款基于jquery开发的类Lightbox插件。支持对放大的图片添加阴影效果,对于一组相关的图片添加导航操作按纽,该lightbox除了能够展示图片之外,还可以展示iframed内容, 通过css自定义外观。

相对与Lightbox而言,阴影效果更好。但是比Lightbox绚丽。

可以点击下面的图片 查看演示效果:

闲篇-利用fancybox插件做一个图片弹窗工具

使用方法

1 需要下载jquery–fancybox的文件,可以直接右击本站,查看源码,然后找到css 和JS文件,直接复制即可

2 引入对应的js和css文件

<pre class="brush:html;toolbar:false">    <!--首先要引入jQuery库和fancybox插件库-->
    <script src="https://ailcc.com/storage/template/default/assets/js/jquery.min.js">
    </script>
    <!--FancyBox核心js和css文件:-->
    <script src="https://ailcc.com/storage/template/default/assets/js/fancybox.min.js">
    </script>
    <link rel="stylesheet" href="https://ailcc.com/storage/template/default/assets/css/fancybox.min.css" type="text/css" media="all">

站内使用相对简单,因为仅仅需要图片弹窗效果 ,所以只需引入上面的JS和CSS即可。

创建一个链接元素

<pre class="brush:html;toolbar:false">    <a href="xxxxxx.jpg" data-fancybox="portfolio">
        <img src="xxxxxxxx.jpg">
    </a>

需要注意的是 “data-fancybox="portfolio” 这句是必须的

PS:不能添加在img里面,不然弹出图片后,关闭弹窗,图片会丢失。

假如是文章编辑中,添加图片,而不能自动添加A标签的话,那面可以在一个全局JS文件中,添加下方JS代码,调用fancybox弹窗功能。

<pre class="brush:js;toolbar:false">$(function(){ $(".post-content img").wrap(function(){ return '
    <a data-fancybox="portfolio" href="'+ $(this).attr(" src="" ")="" +'"="">
        <img src="'+ $(this).attr(" ")="" +'"="" alt="post-title"></a>'; }); });

至于其他的参数,自行百度即可。

正文完
微信扫码打开小程序体验更多功能
post-qrcode
 2
沛霖主页
版权声明:本站原创文章,由 沛霖主页 2021-12-16发表,共计1314字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(2条评论)
Master 评论达人 LV.1
2022-09-06 09:14:58 回复

确实很古董了

 iPhone  Safari  中国河南省郑州市电信
    沛霖主页 博主
    2022-09-06 10:02:15 回复

    @Master 是的 但是不可否认他还是很好用

     Macintosh  Chrome  中国上海上海市联通