zoukankan      html  css  js  c++  java

  • js photoswipe 相册使用 移动pc端均可


    官网  这里使用的是最新 4.1.1版本
    文档


    解压  copy dist文件夹至工程目录  引入

    1. <link rel="stylesheet prefetch" href="${baseURL}/js/3rd-plug/PhotoSwipe-4.1.1/photoswipe.css">
    2. 	<link rel="stylesheet prefetch" href="${baseURL}/js/3rd-plug/PhotoSwipe-4.1.1/default-skin/default-skin.css">
    3. 	<script src="${baseURL}/js/3rd-plug/PhotoSwipe-4.1.1/photoswipe.js"></script>
    4. 	<script src="${baseURL}/js/3rd-plug/PhotoSwipe-4.1.1/photoswipe-ui-default.min.js"></script>

    加上控件 所需要的html ，这样可以直接改html 使控件变样式 ，而不用配参数

    1. <!-- Root element of PhotoSwipe. Must have class pswp. -->
    2. <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true" style="top: 40px;height: 95%;">
    4. 	<!-- Background of PhotoSwipe.
    5.          It's a separate element as animating opacity is faster than rgba(). -->
    6. 	<div class="pswp__bg"></div>
    8. 	<!-- Slides wrapper with overflow:hidden. -->
    9. 	<div class="pswp__scroll-wrap">
    11. 		<!-- Container that holds slides.
    12.             PhotoSwipe keeps only 3 of them in the DOM to save memory.
    13.             Don't modify these 3 pswp__item elements, data is added later on. -->
    14. 		<div class="pswp__container">
    15. 			<div class="pswp__item"></div>
    16. 			<div class="pswp__item"></div>
    17. 			<div class="pswp__item"></div>
    18. 		</div>
    20. 		<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
    21. 		<div class="pswp__ui pswp__ui--hidden">
    23. 			<div class="pswp__top-bar">
    25. 				<!--  Controls are self-explanatory. Order can be changed. -->
    27. 				<div class="pswp__counter"></div>
    29. 				<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
    31. 				<button class="pswp__button pswp__button--share" title="Share"></button>
    33. 				<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
    35. 				<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
    37. 				<!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
    38. 				<!-- element will get class pswp__preloader--active when preloader is running -->
    39. 				<div class="pswp__preloader">
    40. 					<div class="pswp__preloader__icn">
    41. 						<div class="pswp__preloader__cut">
    42. 							<div class="pswp__preloader__donut"></div>
    43. 						</div>
    44. 					</div>
    45. 				</div>
    46. 			</div>
    48. 			<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
    49. 				<div class="pswp__share-tooltip"></div>
    50. 			</div>
    52. 			<button class="pswp__button pswp__button--arrow--left" style="visibility: visible" title="Previous (arrow left)">
    53. 			</button>
    55. 			<button class="pswp__button pswp__button--arrow--right" style="visibility: visible" title="Next (arrow right)">
    56. 			</button>
    58. 			<div class="pswp__caption">
    59. 				<div class="pswp__caption__center"></div>
    60. 			</div>
    62. 		</div>
    64. 	</div>
    66. </div>

    这段html 可以配置控件的默认  如让箭头显示等样式


    接下来配置初始化js   该JS是初始化一个相册列表 ，需要点击才能放大  ， 当然可以模拟点击，具体看下面

    1. var initPhotoSwipeFromDOM = function(gallerySelector) {
    3. 		// parse slide data (url, title, size ...) from DOM elements
    4. 		// (children of gallerySelector)
    5. 		var parseThumbnailElements = function(el) {
    6. 			var thumbElements = el.childNodes,
    7. 					numNodes = thumbElements.length,
    8. 					items = [],
    9. 					figureEl,
    10. 					linkEl,
    11. 					size,
    12. 					item;
    14. 			for(var i = 0; i < numNodes; i++) {
    16. 				figureEl = thumbElements[i]; // <figure> element
    18. 				// include only element nodes
    19. 				if(figureEl.nodeType !== 1) {
    20. 					continue;
    21. 				}
    23. 				linkEl = figureEl.children[0]; // <a> element
    25. 				size = linkEl.getAttribute('data-size').split('x');
    27. 				// create slide object
    28. 				item = {
    29. 					src: linkEl.getAttribute('href'),
    30. 					w: parseInt(size[0], 10),
    31. 					h: parseInt(size[1], 10)
    32. 				};
    36. 				if(figureEl.children.length > 1) {
    37. 					// <figcaption> content
    38. 					item.title = figureEl.children[1].innerHTML;
    39. 				}
    41. 				if(linkEl.children.length > 0) {
    42. 					// <img> thumbnail element, retrieving thumbnail url
    43. 					item.msrc = linkEl.children[0].getAttribute('src');
    44. 				}
    46. 				item.el = figureEl; // save link to element for getThumbBoundsFn
    47. 				items.push(item);
    48. 			}
    50. 			return items;
    51. 		};
    53. 		// find nearest parent element
    54. 		var closest = function closest(el, fn) {
    55. 			return el && ( fn(el) ? el : closest(el.parentNode, fn) );
    56. 		};
    58. 		// triggers when user clicks on thumbnail
    59. 		var onThumbnailsClick = function(e) {
    60. 			e = e || window.event;
    61. 			e.preventDefault ? e.preventDefault() : e.returnValue = false;
    63. 			var eTarget = e.target || e.srcElement;
    65. 			// find root element of slide
    66. 			var clickedListItem = closest(eTarget, function(el) {
    67. 				return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
    68. 			});
    70. 			if(!clickedListItem) {
    71. 				return;
    72. 			}
    74. 			// find index of clicked item by looping through all child nodes
    75. 			// alternatively, you may define index via data- attribute
    76. 			var clickedGallery = clickedListItem.parentNode,
    77. 					childNodes = clickedListItem.parentNode.childNodes,
    78. 					numChildNodes = childNodes.length,
    79. 					nodeIndex = 0,
    80. 					index;
    82. 			for (var i = 0; i < numChildNodes; i++) {
    83. 				if(childNodes[i].nodeType !== 1) {
    84. 					continue;
    85. 				}
    87. 				if(childNodes[i] === clickedListItem) {
    88. 					index = nodeIndex;
    89. 					break;
    90. 				}
    91. 				nodeIndex++;
    92. 			}
    96. 			if(index >= 0) {
    97. 				// open PhotoSwipe if valid index found
    98. 				openPhotoSwipe( index, clickedGallery );
    99. 			}
    100. 			return false;
    101. 		};
    103. 		// parse picture index and gallery index from URL (#&pid=1&gid=2)
    104. 		var photoswipeParseHash = function() {
    105. 			var hash = window.location.hash.substring(1),
    106. 					params = {};
    108. 			if(hash.length < 5) {
    109. 				return params;
    110. 			}
    112. 			var vars = hash.split('&');
    113. 			for (var i = 0; i < vars.length; i++) {
    114. 				if(!vars[i]) {
    115. 					continue;
    116. 				}
    117. 				var pair = vars[i].split('=');
    118. 				if(pair.length < 2) {
    119. 					continue;
    120. 				}
    121. 				params[pair[0]] = pair[1];
    122. 			}
    124. 			if(params.gid) {
    125. 				params.gid = parseInt(params.gid, 10);
    126. 			}
    128. 			return params;
    129. 		};
    131. 		var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
    132. 			var pswpElement = document.querySelectorAll('.pswp')[0],
    133. 					gallery,
    134. 					options,
    135. 					items;
    137. 			items = parseThumbnailElements(galleryElement);
    139. 			// define options (if needed)
    140. 			options = {
    142. 				// define gallery index (for URL)
    143. 				galleryUID: galleryElement.getAttribute('data-pswp-uid'),
    145. 				getThumbBoundsFn: function(index) {
    146. 					// See Options -> getThumbBoundsFn section of documentation for more info
    147. 					var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
    148. 							pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
    149. 							rect = thumbnail.getBoundingClientRect();
    151. 					return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
    152. 				},
    153. 				closeEl:false,
    154. 				fullscreenEl : false, // 是否支持全屏按钮
    155. 				zoomEl: true,
    156. 				shareEl: false,
    157. 				counterEl: true,
    158. 				arrowEl: true,
    159. 				preloaderEl: true,
    160. 				closeOnScroll:false,
    161. 				arrowKeys:true
    163. 			};
    165. 			// PhotoSwipe opened from URL
    166. 			if(fromURL) {
    167. 				if(options.galleryPIDs) {
    168. 					// parse real index when custom PIDs are used
    169. 					// http://photoswipe.com/documentation/faq.html#custom-pid-in-url
    170. 					for(var j = 0; j < items.length; j++) {
    171. 						if(items[j].pid == index) {
    172. 							options.index = j;
    173. 							break;
    174. 						}
    175. 					}
    176. 				} else {
    177. 					// in URL indexes start from 1
    178. 					options.index = parseInt(index, 10) - 1;
    179. 				}
    180. 			} else {
    181. 				options.index = parseInt(index, 10);
    182. 			}
    184. 			// exit if index not found
    185. 			if( isNaN(options.index) ) {
    186. 				return;
    187. 			}
    189. 			if(disableAnimation) {
    190. 				options.showAnimationDuration = 0;
    191. 			}
    193. 			// Pass data to PhotoSwipe and initialize it
    194. 			gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
    195. 			gallery.init();
    196. 		};
    198. 		// loop through all gallery elements and bind events
    199. 		var galleryElements = document.querySelectorAll( gallerySelector );
    201. 		for(var i = 0, l = galleryElements.length; i < l; i++) {
    202. 			galleryElements[i].setAttribute('data-pswp-uid', i+1);
    203. 			galleryElements[i].onclick = onThumbnailsClick;
    204. 		}
    206. 		// Parse URL and open gallery if it contains #&pid=3&gid=1
    207. 		var hashData = photoswipeParseHash();
    208. 		if(hashData.pid && hashData.gid) {
    209. 			openPhotoSwipe( hashData.pid ,  galleryElements[ hashData.gid - 1 ], true, true );
    210. 		}
    211. 	};

    具体参数可以看文档

    准备自定义的html（从服务器获取的数据）

    1. <div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery" style="display: none">
    2. 	<c:forEach items="${requestScope.housePhotoes}" var="housePhoto" >
    3. 	<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    4. 		<a href="${housePhoto.photourl}" itemprop="contentUrl" data-size="1024x1024">
    5. 			<img src="${housePhoto.photourl}" itemprop="thumbnail" alt="Image description" />
    6. 		</a>
    7. 		<figcaption itemprop="caption description">${housePhoto.photoDescrition}</figcaption>
    9. 	</figure>
    10. 	</c:forEach>
    14. </div>

    调用初始化方法传入自定义的class name  并模拟点击

    1. initPhotoSwipeFromDOM('.my-gallery');
    4. 	$(function(){
    5. 		$(".my-gallery").find('figure')[0].click()
    6. 	})


    OK 搞定





    附件列表
    • 相关阅读:
      016 vue的组件通信
      015 vue组件中的数据
      014 vue的组件化开发
      013 vue的js中的高阶函数
      012 vue的v-model的使用
      011 vue的购书案例
      010 vue的过滤器的使用
      CF1519F
      CF1519E
      CF1517F
    • 原文地址：https://www.cnblogs.com/signheart/p/6603468.html
    Copyright © 2011-2022 走看看