PhotoSwipe初使用

<!DOCTYPE html>
<html>
<head>
	<title>PhotoSwipe</title>
	<meta name="author" content="Ste Brennan - Code Computerlove - http://www.codecomputerlove.com/" />
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	
	<link href="styles.css" type="text/css" rel="stylesheet" />
	
	<link href="../photoswipe.css" type="text/css" rel="stylesheet" />
	<script type="text/javascript" charset="utf-8" src="jquery-1.8.2.js"></script>
	<script type="text/javascript" src="../lib/klass.min.js"></script>
	<script type="text/javascript" src="../code.photoswipe-3.0.5.js"></script>
	
	
	<script type="text/javascript">

		(function(window, Util, PhotoSwipe){
		
			document.addEventListener('DOMContentLoaded', function(){
			
		         var
		            dianzanEl,pinglunEl,
					options = {
					
						getToolbar: function(){
							//return '<div class="ps-toolbar-close" style="padding-top: 12px;">Close</div><div class="ps-toolbar-play" //style="padding-top: 12px;">Play</div><div class="ps-toolbar-previous" style="padding-top: 12px;">Previous</div><div //class="ps-toolbar-next" style="padding-top: 12px;">Next</div><div class="say-hi" style="padding-top: 12px;">点赞//<span></span></div>';
							// NB. Calling PhotoSwipe.Toolbar.getToolbar() wil return the default toolbar HTML

							return '<div class="pinglun_class" style="padding-top: 12px;">评论<span></span></div><div class="ps-toolbar-close" style="padding-top: 12px;">关闭</div><div class="dianzan_class" style="padding-top: 12px;">点赞<span></span></div>';

						}
					
					},
					instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
					
		
		
		// onShow - store a reference to our "say hi" button
		instance.addEventHandler(PhotoSwipe.EventTypes.onShow, function(e){
		    console.log(e);
			console.log(e.target.currentIndex);
			dianzanEl = window.document.querySelectorAll('.dianzan_class')[0];
			pinglunEl = window.document.querySelectorAll('.pinglun_class')[0];

			//点赞
            var dianzan=$("#img_"+e.target.currentIndex+"").attr("data-dianzan");
			$(".dianzan_class span").html(dianzan);
			//评论           
			var pinglun=$("#img_"+e.target.currentIndex+"").attr("data-pinglun");
			$(".pinglun_class span").html(pinglun);
            //图片描述
			var desc=$("#img_"+e.target.currentIndex+"").attr("data-desc");
            $("#imgdesc").show();
			$("#imgdesc").html(desc);
		});
		
		// onToolbarTap - listen out for when the toolbar is tapped
		instance.addEventHandler(PhotoSwipe.EventTypes.onToolbarTap, function(e){
			if (e.toolbarAction === PhotoSwipe.Toolbar.ToolbarAction.none){
				if (e.tapTarget === dianzanEl || Util.DOM.isChildOf(e.tapTarget, dianzanEl)){
					alert('点赞成功!');
				}
				if (e.tapTarget === pinglunEl || Util.DOM.isChildOf(e.tapTarget, pinglunEl)){
				   //传递参数可以参考评论点赞做法
					alert('我要调转到评论页面!');
				}
			}
		});
		
		// onBeforeHide - clean up
		instance.addEventHandler(PhotoSwipe.EventTypes.onBeforeHide, function(e){
			dianzanEl = null;
			pinglunEl = null;
			$("#imgdesc").hide();
		});
		//显示图片时显示点赞数和图片描述信息	 
		instance.addEventHandler(PhotoSwipe.EventTypes.onDisplayImage, function(e){
             console.log(e);
 			//点赞
            var dianzan=$("#img_"+e.target.currentIndex+"").attr("data-dianzan");
 			$(".dianzan_class span").html(dianzan);
 			//评论           
			var pinglun=$("#img_"+e.target.currentIndex+"").attr("data-pinglun");
			$(".pinglun_class span").html(pinglun);
             //图片描述
 			var desc=$("#img_"+e.target.currentIndex+"").attr("data-desc");
             $("#imgdesc").show();
 			$("#imgdesc").html(desc);
 			
		});



			}, false);
			
			
		}(window, window.Code.Util, window.Code.PhotoSwipe));
		
	</script>
	
</head>
<body>

<div id="Header">
	<a href="javascript:void(0)"><img src="images/codecomputerlovelogo.gif" width="230" height="48" alt="Code Computerlove" /></a>
</div>

<div id="MainContent">

	<div class="page-content">
		<h1>PhotoSwipe</h1>
	</div>
	
	<ul id="Gallery" class="gallery">
		<li><a href="images/full/001.jpg"><img src="images/thumb/001.jpg" alt="Image 001"  data-pinglun="30" data-dianzan="50" data-desc="每天5分钟,轻松搞定职场英语"  id="img_0"/></a></li>
		<li><a href="images/full/002.jpg"><img src="images/thumb/002.jpg" alt="Image 002"  data-pinglun="20" data-dianzan="2"  data-desc="我的方向盘很灵敏，轻轻一转汽车就有反应。" id="img_1"/></a></li>
		<li><a href="images/full/003.jpg"><img src="images/thumb/003.jpg" alt="Image 003"  data-pinglun="10" data-dianzan="3"  data-desc="是电使轮子转动的吗?" id="img_2"/></a></li>
		<li><a href="images/full/004.jpg"><img src="images/thumb/004.jpg" alt="Image 004"  data-pinglun="0" data-dianzan="4"  data-desc="船长转动舵轮，向西北方向驶去。" id="img_3"/></a></li>
	</ul>
	
</div>	
<!--存放图片描述信息-->
<div  id="imgdesc" style="position: absolute;z-index:20000;bottom: 80px;left:35px;color:#ffffff;margin:10px 10px 10px 10px;display:none;"></div>


</body>
</html>
效果图如下：
猜你喜欢
