1. 程式人生 > >PhotoSwipe動態載入圖片

PhotoSwipe動態載入圖片

<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%> 
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
		 	+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://stc.weimob.com/css/photo.css?2013-11-25-1" media="all" />
<link rel="stylesheet" type="text/css" href="http://stc.weimob.com/css/photoswipe.css?2013-11-25-1" media="all" />
<script type="text/javascript" src="http://stc.weimob.com/src/jQuery.js?2013-11-25-1"></script>
<script type="text/javascript" src="http://stc.weimob.com/src/jquery_imagesloaded.js?2013-11-25-1"></script>
<script type="text/javascript" src="http://stc.weimob.com/src/jquery_wookmark_min.js?2013-11-25-1"></script>
<script type="text/javascript" src="http://stc.weimob.com/src/klass_min.js?2013-11-25-1"></script>
<script type="text/javascript" src="http://stc.weimob.com/src/code_photoswipe_min.js?2013-11-25-1"></script>
<script type="text/javascript" src="http://stc.weimob.com/src/jquery_lazyload.js?2013-11-25-1"></script>
<title>蛋糕誘惑</title>
<style type="text/css">
	body{
	text-align: center;
	margin: 0;
	padding: 0;
	background: url("../images/bj_0.jpg") repeat-y;
	background-size:100%; 
	}
	a{
		text-decoration: none;
	}
	#nav{
		margin: 0 auto;
		margin-top: 47px;
		margin-bottom: 0px;
	}
	#nav ul{
		width: 100%;
		margin-left: -12%;
	}
	#nav ul li{
	float: left;
	width: 20%;
	list-style-type: none;
	text-align: center;
	}
	#nav ul li a{
	font-size: 0.7em;
	color: #ffca7a;
	}
	#main{
		text-align: center;
		font-size: 0.8em;
		color: #fff;
	}
	.main_t{
		width: 100%;
		margin-bottom: 15px;
	}
	.main_t img{
	width: 70%;
	}
	#foot{
		margin-top: 16px;
	}
	#foot img{
	width: 100%;
	}
	#content{
	width:100%;
	margin: 0 auto;
	text-align: center;
	background:url("../images/bj_3.jpg") repeat-y; 
	background-size:100%; 
	color: #fff;
}
	#content ul {
	width: 100%;
	margin-left: -10%;
	}
	#content ul li{
	float:left;
	width: 48%;
	list-style-type: none;
	}
	#content ul li img {
	width: 95%;
	}
</style>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta name="Keywords" content="微盟、微信營銷、微信代運營、微信定製開發、微信託管、微網站、微商城、微營銷" />
<meta name="Description" content="微盟,國內最大的微信公眾智慧服務平臺,微盟八大微體系:微選單、微官網、微會員、微活動、微商城、微推送、微服務、微統計,企業微營銷必備。" />
<!-- Mobile Devices Support @begin -->
<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
<meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
<meta content="no-cache" http-equiv="pragma">
<meta content="0" http-equiv="expires">
<meta content="telephone=no, address=no" name="format-detection">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- apple devices fullscreen -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- Mobile Devices Support @end -->
<link rel="shortcut icon" href="http://stc.weimob.com/img/favicon.ico" />
<style>
img { 
	width: 100% !important;
}
#Gallery li{
	display: block;
	float: left;
	width: 45%;
	margin: 5px 1%;
}
</style>

<script type="text/javascript">
	$(function() {               
		//動態戶型資訊 
		function loadProductSort() {
			$.ajax({ 
				async: false, 
				type : "POST", 
				url : "<%=basePath%>findHuxingyemian.action",
				success : function(data) {
					var list = data.list;
					var row = "";      
					$("#Gallery").empty();   
					for ( var i = 0; i < list.length; i++) {            
						row = "<li><a href=\"../pic/"+list[i].holdpic+"\"><img src=\"../pic/"+list[i].holdpic+"\"><br>"+list[i].holdname+"</a></li>";
						$(row).appendTo($("#Gallery"));  
					}   
				},   
			}); 
		} 
		window.onload = loadProductSort();
	});
</script> 

</head>
<body onselectstart="return true;" ondragstart="return false;">
<body id="photo" ondragstart="return false;" onselectstart="return false;">
	<script type="text/javascript">
		(function(window) {
			document.addEventListener('DOMContentLoaded', function() {
				var PhotoSwipe = window.Code.PhotoSwipe;
				var options = {
					loop : false   
				}, instance = PhotoSwipe.attach(window.document
						.querySelectorAll('#Gallery a'), options);
			}, false);
		})(window);   
	</script> 
	<div id="nav">
			<ul>    
				<li><a href="article.jsp">最新動態</a></li> 
				<li><a href="manage.jsp">專案資訊</a></li>  
				<li><a href="quality.jsp">質量保證</a></li> 
				<li><a href="tenement.jsp">物業服務</a></li>
				<li><a href="login.jsp">會員專區</a></li>
			</ul>
	</div><br><br> 
	<div class="body"> 
		<div id="main" role="main">
           <ul id="Gallery" >   
		  </ul> 
		</div>
	</div>
	<div id="foot">
		<img src="../images/foot.jpg">
	</div> 
	
	<script type="text/javascript"> 
		(function($) {             
			$('#Gallery').imagesLoaded(function() {
				// Prepare layout options.
				var options = {
					autoResize : true, // This will auto-update the layout when the browser window is resized.
					container : $('#main'), // Optional, used for some extra CSS styling
					offset : 4, // Optional, the distance between grid items
					itemWidth : 150
				// Optional, the width of a grid item
				};
				// Get a reference to your grid items.
				var handler = $('#Gallery li');        
				// Call the layout function.
				handler.wookmark(options);
			});
		})(jQuery); 
	</script>
</body> 

</div>
</body>
</html>