PhotoSwipe初使用

shuai1234

浏览: 972309 次
性别:
来自: 山西

最近访客更多访客>>

tangang

shnsvyu

zhoukunhy

__点__

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Android

<!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>

效果图如下：

查看图片附件

分享到：

React 入门实例教程 | android重新签名APK文件

2016-03-26 15:58
浏览 760
评论(0)
分类:移动开发
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

PhotoSwipe初使用

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

PhotoSwipe初使用

评论

发表评论

相关推荐

Android客户端代码保护技术-完整性校验

android开发中手动v2签名实现方法

webview支持LocalStorage本地存储

七步配置phonegap+cordova+ionic开发环境

梆梆加固破解

android zxing 扫描二维码 横屏转竖屏

封装Volley使Volley的每个请求都自动保存和发送Cookie

Android二维码ZXing扫描区域大小的调整，提高扫描速度

解决Android二维码扫描ZXing竖屏拉伸变长闪退扫描区域小等问题

Android平台下利用zxing实现二维码开发

Zxing扫描二维码

Android 基于google Zxing实现二维码、条形码扫描，仿微信二维码扫描效果

React Native应用部署/热更新-CodePush最新集成总结

让微信二维码扫描您的APK

Activity类的runOnUiThread方法

Can't create handler inside thread that has not called Looper.prepare()

Android编程之解决android-support-v4打包问题

Android 编程下的代码混淆之(android-support-v4.jar)

phoneGap可行性分析

梆梆SDKs详细分析（1） - 防界面劫持SDK

最近访客更多访客>>

android zxing 扫描二维码横屏转竖屏