jQuery图片相册点击缩略图弹出大图预览特效

js代码

<script>
	var img_index = 0;
	var img_src = \"\";

	$(function() {
		//计算居中位置
		var mg_top = ((parseInt($(window).height()) - parseInt($(\".photo-div\").height())) / 2);

		$(\".photo-div\").css({
			\"margin-top\": \"\" + mg_top + \"px\"
		});
		//关闭
		$(\".photo-close\").click(function() {
			$(\".photo-mask\").hide();
			$(\".photo-panel\").hide();
		});
		//下一张
		$(\".photo-panel .photo-div .arrow-next\").click(function() {
			img_index++;
			if(img_index >= $(\".demo li img\").length) {
				img_index = 0;
			}
			img_src = $(\".demo li img\").eq(img_index).attr(\"src\");
			photoView($(\".demo li img\"));
		});
		//上一张
		$(\".photo-panel .photo-div .arrow-prv\").click(function() {
			img_index--;
			if(img_index < 0) {
				img_index = $(\".demo li img\").length - 1;
			}
			img_src = $(\".demo li img\").eq(img_index).attr(\"src\");
			photoView($(\".demo li img\"));
		});
		//如何调用？
		$(\".demo li img\").click(function() {
			$(\".photo-mask\").show();
			$(\".photo-panel\").show();
			img_src = $(this).attr(\"src\");
			img_index = $(this).index();
			photoView($(this));
		});

	});
	//自适应预览
	function photoView(obj) {
		if($(obj).width() >= $(obj).height()) {
			$(\".photo-panel .photo-div .photo-img .photo-view-h\").attr(\"class\", \"photo-view-w\");
			$(\".photo-panel .photo-div .photo-img .photo-view-w img\").attr(\"src\", img_src);
		} else {
			$(\".photo-panel .photo-div .photo-img .photo-view-w\").attr(\"class\", \"photo-view-h\");
			$(\".photo-panel .photo-div .photo-img .photo-view-h img\").attr(\"src\", img_src);
		}
		//此处写调试日志
		console.log(img_index);
	}
</script>