您现在的位置是:首页 > 学无止境 > 其他网站首页其他 使用fancybox让网站文章图片点击预览、左右滑动、自动切换、双击手捏放大缩小的实现

使用fancybox让网站文章图片点击预览、左右滑动、自动切换、双击手捏放大缩小的实现

  • 莫愁
  • 其他
  • 2019-06-11
简介在没有设置图片预览的时候,有些图很小,导致用户体验差,虽然设置了新窗口打开图片,但是也没让体验感增加,那么如何实现点击图片在本窗口打开预览呢?
字数 438.5

在没有设置图片预览的时候,有些图很小,导致用户体验差,虽然设置了新窗口打开图片,但是也没让体验感增加,那么如何实现点击图片在本窗口打开预览呢?在没有看见魏义齐博客分享的文章前,我看见有人分享iview和使用Flutter来实现,但是效果都不怎么好。下面我就分享一下fancyapps

一、下载fancybox

fancybox官网提供下载文件包(http://fancyapps.com/fancybox/3/),下载下来后我们能用到的是dist文件夹下的jquery.fancybox.min.css和jquery.fancybox.min.js。

二、文章模板引用

把上面的两个文件引入到文章模板的头部,jquery.fancybox.min.js要在网站jQuery库下面,jQuery库建议最新。

三、文章模板JQ改写

这个fancybox(JavaScript灯箱库)起效果的前提是给图片包裹上a标签然后里面加上data-fancybox="xx",data-fancybox里面可以是images也可以是video,图片比如data-fancybox="images",加上这个后就自动绑定和启动fancybox()这个对象,但是我们添加图片都没添加a标签,那么如何解决这个问题呢?下面是解决的代码:

解释:这里使用jq库里面的方法找到名为newstext的类,然后找到img标签,循环重复上面的操作,然后使用wrap()方法包裹我们刚才获得的img标签。

下面就是效果图:

效果图

 


转载: 感谢您对莫愁个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“来源莫愁个人博客 https://www.mochoublog.com/study/251.html”。

文章评论

    • 评论
    人参与,条评论

技术在线

服务时间

周一至周日 12:00-22:00

关闭下雪
关闭背景特效