PhotoSwipe动态加载图片

最新推荐文章于 2021-06-02 14:18:21 发布

angel豆蔻年华

最新推荐文章于 2021-06-02 14:18:21 发布

阅读量3k

点赞数

分类专栏： jquery 文章标签： javascript

本文链接：https://blog.csdn.net/u012635819/article/details/17318055

版权

jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!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;" οndragstart="return false;">
<body id="photo" οndragstart="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>

angel豆蔻年华

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
PhotoSwipe动态加载图片

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.get
复制链接

扫一扫

专栏目录