工作室注册登录标签云赞助光荣榜

当前位置:首页 > 全栈分享 > JavaScript > 正文

网站通用使文章图片相册式预览、左右滑动、自动切换、双击手捏放大缩小的方法

发布时间:2019-06-10 22:52:16作者:魏义齐阅读:()

本文为博主原创文章,未经博主允许不得转载。

站长朋友应该都注意到了,百度搜索资源平台的移动落地页检测以前是自动检测现在是工具,如果文章中的图片不支持全屏预览、放大缩小和左右滑动那么检测的结果是不符合移动落地页规范。

百度的要求是越来越多,但是哪个站长不是一边骂百度一边又在做seo,所以我们还是按照百度的要求整改,以求在移动互联网时代能获得更多的移动搜索流量。

这个方法来自懿古今的一篇文章: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一样,有利于搜索引擎对图片的收录。

本文标签:,您可以阅读与「」相关的所有文章

魏义齐全栈技术交流:魏义齐全栈技术交流

相关阅读

    无相关信息

上一篇:生日选择代码下一篇:返回列表

原创不易,您的赞助就是博主更新的动力!

赞助本站可在赞助光荣榜留下外链信息,支付宝扫此二维码可领红包

工作室注册登录标签云赞助光荣榜

最新会员
  • weiyiqi