1. 首页
  2. 帝国cms

帝国cms网站文章图片相册式预览、左右滑动、自动切换、双击手捏放大缩小的实现方法

这个方法来自懿古今的一篇文章:https://www.yigujin.cn/1301.html,但是他的网站是WordPress,本文要说的方法适合所有网站

首先去fancybox网站下载文件包(http://fancyapps.com/fancybox/3/),或者去github:https://github.com/fancyapps/fancybox,下载下来后我们能用到的是dist文件夹下的jquery.fancybox.min.css和jquery.fancybox.min.js,把这两个文件引入到文章模板的头部,jquery.fancybox.min.js要在网站jQuery库下面,库jQuery 1.9.1+和jQuery 2+都可以,但首选还是jQuery3+,一般网站都有jQuery库,所以就不用引入示例中的jquery-3.2.1.min.js了。

这个灯箱库起效果的前提是给a标签加上data-fancybox=””,data-fancybox里面可以是images也可以是video,图片比如data-fancybox=”images”,加上这个后就自动绑定和启动fancybox的click事件,但是大多数网站文章中的图片都没有包裹a标签,那么就需要解决两个问题:给img包裹上a标签,a标签里加上data-fancybox=”images” href=”图片地址”,下面是通用代码

<script>

$(function () {

$('.wenzhang').find('img').each(function () {

var _this = $(this);

var _src = _this.attr("src");

_this.wrap('<a data-fancybox="images" href="' + _src + '"></a>');

})

})

</script> 

假设你的文章调用标签在容器.wenzhang里,那么文章里所有的图片都会包裹上a标签。我这个实现的只是低配的,也就是href地址跟图片地址是一样的,标准的是img标签里的图片是小图,href地址是小图地址对应的大图地址,这样的好处是点相册式预览,也就是点下图中圈出来的按钮
相册式预览
右边的缩略图看着比较美观,如果href地址跟img标签的src地址一样,那么右边的缩略图只截取大图缩小后的一部分,风景图片看起来还好,因为风景图片在拍摄时会突出主体,如果是普通文章的截图看起来就很差劲了,因为没有中心点,截取后图片是残缺的。

更深层次的使用大家可以去看文档:https://fancyapps.com/fancybox/3/docs/。

2019年6月19日补充:在查看官方示例时发现预览图片底部有文字说明,这是因为a标签加上了data-caption,我们可以获取图片alt属性的值然后赋给data-caption,上面的代码简单修改下就可以实现

$(function () {

$('.wenzhang').find('img').each(function () {

var _this = $(this);

var _src = _this.attr("src");

var _alt = _this.attr("alt");

_this.wrap('<a data-fancybox="images" href="' + _src + '" data-caption="' + _alt + '"></a>');

})

})

2019年7月3日补充:加上

$(this).attr('title','' + _alt + '');

给图片加上title标签,title的内容跟alt一样,有利于搜索引擎对图片的收录。

原创文章,作者:懒咪WP,如若转载,请注明出处:https://www.lanmit.com/2400.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据