PhotoSwipe動態載入圖片
阿新 • • 發佈：2019-02-05
<!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>