1、需求:文章发布完成后,在移动端展示的时候需要预览图片,即单击图片大图展示
这里我用了PhotoSwipe4 但是在文章上传时我用的summernote 所以图片没有这块暂时无法与PhotoSwipe4 集成
不过文章展示时我用的js处理:
//添加图片预览
$('#divcontent').find("img").each(function(i){
$("#this").attr("itemprop","thumbnail");
$("#this").attr("alt","Image description");
//宽度
var strbf='<div class=\"my-gallery\" itemscope ><figure itemprop=\"associatedMedia\" itemscope ><a href=\"'+$(this)[0].src+'\" itemprop=\"contentUrl\" data-size=\"1024x1024\">';
$(this).replaceWith(strbf+$(this).prop("outerHTML")+"</a></figure>");
});
这样处理后显示无问题
2、图片放大后拉伸,不能自适应
处理方式,参照网上的方法:
//处理图片放大时拉伸变形的问题
window.function(){
auto_data_size();
};
function auto_data_size(){
var imgss= $("figure img");
$("figure img").each(function() {
var imgs = new Image();
imgs.src=$(this).attr("src");
var w = imgs.width,
h =imgs.height;
$(this).parent("a").attr("data-size","").attr("data-size",w+"x"+h);
})
};
详细的代码请下载
源码下载