关于PhotoSwipe4使用上的一些总结

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);
		})
		};

详细的代码请下载
源码下载