`

移动端html5点击图片全屏放大

 
阅读更多 
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <link href="http://cdn.bootcss.com/photoswipe/4.1.1/photoswipe.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/photoswipe/4.1.1/default-skin/default-skin.css" rel="stylesheet">

 </head>
 <body>
  <div id="demo-test-gallery" class="demo-gallery">
    <a href="https://farm4.staticflickr.com/3894/15008518202_c265dfa55f_h.jpg" data-size="1600x1600" data-med="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_b.jpg" data-med-size="1024x1024">
        <img src="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg" alt="" />
    </a>

    <a href="https://farm6.staticflickr.com/5591/15008867125_b61960af01_h.jpg" data-size="1600x1068" data-med="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg" data-med-size="1024x1024">
        <img src="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg" alt="" />
    </a>
</div>
 </body>
 <script src="http://cdn.bootcss.com/photoswipe/4.1.1/photoswipe.js"></script>
<script src="http://cdn.bootcss.com/photoswipe/4.1.1/photoswipe-ui-default.js"></script>
<script >
document.writeln("<!-- Root element of PhotoSwipe. Must have class pswp. -->");
document.writeln("<div class=\"pswp\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">");
document.writeln("");
document.writeln("    <!-- Background of PhotoSwipe.");
document.writeln("         It\'s a separate element as animating opacity is faster than rgba(). -->");
document.writeln("    <div class=\"pswp__bg\"><\/div>");
document.writeln("");
document.writeln("    <!-- Slides wrapper with overflow:hidden. -->");
document.writeln("    <div class=\"pswp__scroll-wrap\">");
document.writeln("");
document.writeln("        <!-- Container that holds slides.");
document.writeln("            PhotoSwipe keeps only 3 of them in the DOM to save memory.");
document.writeln("            Don\'t modify these 3 pswp__item elements, data is added later on. -->");
document.writeln("        <div class=\"pswp__container\">");
document.writeln("            <div class=\"pswp__item\"><\/div>");
document.writeln("            <div class=\"pswp__item\"><\/div>");
document.writeln("            <div class=\"pswp__item\"><\/div>");
document.writeln("        <\/div>");
document.writeln("");
document.writeln("        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->");
document.writeln("        <div class=\"pswp__ui pswp__ui--hidden\">");
document.writeln("");
document.writeln("            <div class=\"pswp__top-bar\">");
document.writeln("");
document.writeln("                <!--  Controls are self-explanatory. Order can be changed. -->");
document.writeln("");
document.writeln("                <div class=\"pswp__counter\"><\/div>");
document.writeln("");
document.writeln("                <button class=\"pswp__button pswp__button--close\" title=\"Close (Esc)\"><\/button>");
document.writeln("");
document.writeln("                <button class=\"pswp__button pswp__button--share\" title=\"Share\"><\/button>");
document.writeln("");
document.writeln("                <button class=\"pswp__button pswp__button--fs\" title=\"Toggle fullscreen\"><\/button>");
document.writeln("");
document.writeln("                <button class=\"pswp__button pswp__button--zoom\" title=\"Zoom in\/out\"><\/button>");
document.writeln("");
document.writeln("                <!-- Preloader demo http:\/\/codepen.io\/dimsemenov\/pen\/yyBWoR -->");
document.writeln("                <!-- element will get class pswp__preloader--active when preloader is running -->");
document.writeln("                <div class=\"pswp__preloader\">");
document.writeln("                    <div class=\"pswp__preloader__icn\">");
document.writeln("                        <div class=\"pswp__preloader__cut\">");
document.writeln("                            <div class=\"pswp__preloader__donut\"><\/div>");
document.writeln("                        <\/div>");
document.writeln("                    <\/div>");
document.writeln("                <\/div>");
document.writeln("            <\/div>");
document.writeln("");
document.writeln("            <div class=\"pswp__share-modal pswp__share-modal--hidden pswp__single-tap\">");
document.writeln("                <div class=\"pswp__share-tooltip\"><\/div>");
document.writeln("            <\/div>");
document.writeln("");
document.writeln("            <button class=\"pswp__button pswp__button--arrow--left\" title=\"Previous (arrow left)\">");
document.writeln("            <\/button>");
document.writeln("");
document.writeln("            <button class=\"pswp__button pswp__button--arrow--right\" title=\"Next (arrow right)\">");
document.writeln("            <\/button>");
document.writeln("");
document.writeln("            <div class=\"pswp__caption\">");
document.writeln("                <div class=\"pswp__caption__center\"><\/div>");
document.writeln("            <\/div>");
document.writeln("");
document.writeln("        <\/div>");
document.writeln("");
document.writeln("    <\/div>");
document.writeln("");
document.writeln("<\/div>");



    (function() {

			/*function imageInit(){
		    		var cont= $('.demo-gallery').html();
		    		var tt=/\<img.+?src=\"(.*)\".*?\>/gi; 
		    		console.log(cont)
		    		var newCont = cont.replace(tt,'<a href="$1" data-size="1600x1600" data-med="$1" data-med-size="1024x1024"><img src="$1" alt=""/></a>');
		    		$('.demo-gallery').html(newCont).show();
		    	} 
		    imageInit();*/

		var initPhotoSwipeFromDOM = function(gallerySelector) {

			var parseThumbnailElements = function(el) {
			    var thumbElements = el.childNodes,
			        numNodes = thumbElements.length,
			        items = [],
			        el,
			        childElements,
			        thumbnailEl,
			        size,
			        item;

			    for(var i = 0; i < numNodes; i++) {
			        el = thumbElements[i];

			        // include only element nodes 
			        if(el.nodeType !== 1) {
			          continue;
			        }

			        childElements = el.children;

			        size = el.getAttribute('data-size').split('x');

			        // create slide object
			        item = {
						src: el.getAttribute('href'),
						w: parseInt(size[0], 10),
						h: parseInt(size[1], 10),
						author: el.getAttribute('data-author')
			        };

			        item.el = el; // save link to element for getThumbBoundsFn

			        if(childElements.length > 0) {
			          item.msrc = childElements[0].getAttribute('src'); // thumbnail url
			          if(childElements.length > 1) {
			              item.title = childElements[1].innerHTML; // caption (contents of figure)
			          }
			        }


					var mediumSrc = el.getAttribute('data-med');
		          	if(mediumSrc) {
		            	size = el.getAttribute('data-med-size').split('x');
		            	// "medium-sized" image
		            	item.m = {
		              		src: mediumSrc,
		              		w: parseInt(size[0], 10),
		              		h: parseInt(size[1], 10)
		            	};
		          	}
		          	// original image
		          	item.o = {
		          		src: item.src,
		          		w: item.w,
		          		h: item.h
		          	};

			        items.push(item);
			    }

			    return items;
			};

			// find nearest parent element
			var closest = function closest(el, fn) {
			    return el && ( fn(el) ? el : closest(el.parentNode, fn) );
			};

			var onThumbnailsClick = function(e) {
			    e = e || window.event;
			    e.preventDefault ? e.preventDefault() : e.returnValue = false;

			    var eTarget = e.target || e.srcElement;

			    var clickedListItem = closest(eTarget, function(el) {
			        return el.tagName === 'A';
			    });

			    if(!clickedListItem) {
			        return;
			    }

			    var clickedGallery = clickedListItem.parentNode;

			    var childNodes = clickedListItem.parentNode.childNodes,
			        numChildNodes = childNodes.length,
			        nodeIndex = 0,
			        index;

			    for (var i = 0; i < numChildNodes; i++) {
			        if(childNodes[i].nodeType !== 1) { 
			            continue; 
			        }

			        if(childNodes[i] === clickedListItem) {
			            index = nodeIndex;
			            break;
			        }
			        nodeIndex++;
			    }

			    if(index >= 0) {
			        openPhotoSwipe( index, clickedGallery );
			    }
			    return false;
			};

			var photoswipeParseHash = function() {
				var hash = window.location.hash.substring(1),
			    params = {};

			    if(hash.length < 5) { // pid=1
			        return params;
			    }

			    var vars = hash.split('&');
			    for (var i = 0; i < vars.length; i++) {
			        if(!vars[i]) {
			            continue;
			        }
			        var pair = vars[i].split('=');  
			        if(pair.length < 2) {
			            continue;
			        }           
			        params[pair[0]] = pair[1];
			    }

			    if(params.gid) {
			    	params.gid = parseInt(params.gid, 10);
			    }

			    return params;
			};

			var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
			    var pswpElement = document.querySelectorAll('.pswp')[0],
			        gallery,
			        options,
			        items;

				items = parseThumbnailElements(galleryElement);

			    // define options (if needed)
			    options = {
					fullscreenEl : true, // 是否支持全屏按钮
					shareButtons: [
					/*{id:'wechat', label:'分享微信', url:'#'},
					{id:'weibo', label:'新浪微博', url:'#'},*/
					{id:'download', label:'保存图片', url:'{{raw_image_url}}', download:true}
					], // 分享按钮

			        galleryUID: galleryElement.getAttribute('data-pswp-uid'),

			        getThumbBoundsFn: function(index) {
			            // See Options->getThumbBoundsFn section of docs for more info
			            var thumbnail = items[index].el.children[0],
			                pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
			                rect = thumbnail.getBoundingClientRect(); 

			            return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
			        },

			        addCaptionHTMLFn: function(item, captionEl, isFake) {
						if(!item.title) {
							captionEl.children[0].innerText = '';
							return false;
						}
						captionEl.children[0].innerHTML = item.title +  '<br/><small>Photo: ' + item.author + '</small>';
						return true;
			        },
					
			    };


			    if(fromURL) {
			    	if(options.galleryPIDs) {
			    		// parse real index when custom PIDs are used 
			    		// http://photoswipe.com/documentation/faq.html#custom-pid-in-url
			    		for(var j = 0; j < items.length; j++) {
			    			if(items[j].pid == index) {
			    				options.index = j;
			    				break;
			    			}
			    		}
				    } else {
				    	options.index = parseInt(index, 10) - 1;
				    }
			    } else {
			    	options.index = parseInt(index, 10);
			    }

			    // exit if index not found
			    if( isNaN(options.index) ) {
			    	return;
			    }

				// options for control bar
                //options.shareEl = false;
               // options.fullscreenEl = true;

				var radios = document.getElementsByName('gallery-style');
				for (var i = 0, length = radios.length; i < length; i++) {
				    if (radios[i].checked) {
				        if(radios[i].id == 'radio-all-controls') {

				        } else if(radios[i].id == 'radio-minimal-black') {
				        	options.mainClass = 'pswp--minimal--dark';
					        options.barsSize = {top:0,bottom:0};
							options.captionEl = false;
							options.fullscreenEl = false;
							options.shareEl = false;
							options.bgOpacity = 0.85;
							options.tapToClose = true;
							options.tapToToggleControls = false;
				        }
				        break;
				    }
				}

			    if(disableAnimation) {
			        options.showAnimationDuration = 0;
			    }

			    // Pass data to PhotoSwipe and initialize it
			    gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);

			    // see: http://photoswipe.com/documentation/responsive-images.html
				var realViewportWidth,
				    useLargeImages = false,
				    firstResize = true,
				    imageSrcWillChange;

				gallery.listen('beforeResize', function() {

					var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;
					dpiRatio = Math.min(dpiRatio, 2.5);
				    realViewportWidth = gallery.viewportSize.x * dpiRatio;


				    if(realViewportWidth >= 1200 || (!gallery.likelyTouchDevice && realViewportWidth > 800) || screen.width > 1200 ) {
				    	if(!useLargeImages) {
				    		useLargeImages = true;
				        	imageSrcWillChange = true;
				    	}
				        
				    } else {
				    	if(useLargeImages) {
				    		useLargeImages = false;
				        	imageSrcWillChange = true;
				    	}
				    }

				    if(imageSrcWillChange && !firstResize) {
				        gallery.invalidateCurrItems();
				    }

				    if(firstResize) {
				        firstResize = false;
				    }

				    imageSrcWillChange = false;

				});

				gallery.listen('gettingData', function(index, item) {
				    if( useLargeImages ) {
				        item.src = item.o.src;
				        item.w = item.o.w;
				        item.h = item.o.h;
				    } else {
				        item.src = item.m.src;
				        item.w = item.m.w;
				        item.h = item.m.h;
				    }
				});

			    gallery.init();
			};

			// select all gallery elements
			var galleryElements = document.querySelectorAll( gallerySelector );
			for(var i = 0, l = galleryElements.length; i < l; i++) {
				galleryElements[i].setAttribute('data-pswp-uid', i+1);
				galleryElements[i].onclick = onThumbnailsClick;
			}

			// Parse URL and open gallery if it contains #&pid=3&gid=1
			var hashData = photoswipeParseHash();
			if(hashData.pid && hashData.gid) {
				openPhotoSwipe( hashData.pid,  galleryElements[ hashData.gid - 1 ], true, true );
			}
		};

		initPhotoSwipeFromDOM('.demo-gallery');

	})();

	

</script>
</html>
分享到：
| 拖拽-排班
评论
发表评论

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

相关推荐

    移动端点击放大、缩放图片，微信端点击放大图片

    综上所述，实现移动端图片点击放大和手势缩放，主要涉及到HTML5的触摸事件、CSS3的`transform`属性，以及在微信环境下使用JSSDK的接口。对于开发者来说，理解这些知识点并能灵活运用，是提升移动应用用户体验的重要...

    lighterbox相册照片浏览插件，支持移动端浏览器，点击图片可以放大观看。兼容主流浏览器.rar

    在压缩包"lighterbox相册照片浏览插件，支持移动端浏览器，点击图片可以放大观看。兼容主流浏览器.rar"中，包含了实现这些功能所需的文件。通常，这可能包括Lighterbox的核心JavaScript文件（如`lighterbox.js`）、...

    html5 div图片放大插件手机端图片放大预览效果

    html5 div图片放大插件手机端图片放大预览效果 html5 div图片放大插件手机端图片放大预览效果 html5 div图片放大插件手机端图片放大预览效果 html5 div图片放大插件手机端图片放大预览效果

    js 移动端 触摸 放大图片

    5. 处理边界条件，限制图片放大缩小范围。 6. 可选地，添加平移、全屏切换等功能。 这个名为`touchzoom`的压缩包可能包含了实现上述功能的示例代码，供开发者参考和学习。通过深入理解这些代码，开发者可以创建出与...

    移动端图片放大功能

    在移动端开发中，图片放大功能是一项常见的需求，尤其在用户需要查看细节时。本文将详细介绍如何利用JavaScript、CSS和HTML来实现这一功能，同时结合ASP.NET的后台支持，为移动端应用提供更好的用户体验。 首先，...

    MediumLightbox是一款支持移动端的仿medium图片放大预览js插件

    在网页中，当用户点击一张图片时，MediumLightbox能够将图片优雅地放大并居中显示在屏幕中央，提供了一种无缝且沉浸式的查看图片的方式。这种设计不仅提升了用户体验，还保持了网站的简洁和一致性。 在JavaScript...

    bootstrap 点击图片 弹框变大

    然后，我们可以通过 JavaScript 或 jQuery 来处理图片点击事件。在 `js` 文件夹中的 JavaScript 代码（如 `script.js`）里，可以添加以下代码： ```javascript $(document).ready(function() { $('#thumbnail')....

    瀑布流排版鼠标点击全屏放大图片代码

    在“瀑布流排版鼠标点击全屏放大图片代码”中，我们主要探讨的是如何在网页中实现这样的功能，并且支持用户通过鼠标点击将图片全屏放大，同时兼容手机移动端。 首先，`index.html` 是网站的主文件，它包含了网页的...

    瀑布流排版鼠标点击全屏放大图片代码.zip

    在这个案例中，"瀑布流排版鼠标点击全屏放大图片代码" 是一种结合了瀑布流布局和图片全屏展示功能的JavaScript特效。 首先，我们需要了解瀑布流布局的核心实现原理。通常，瀑布流布局是通过CSS Flexbox或Grid布局来...

    js+css点击弹出遮罩层图片放大展示demo

    在网页设计中，有时我们需要实现一个功能：当用户点击图片或某个链接时，页面上会出现一个半透明的遮罩层，同时图片会在其中放大展示，为用户提供更好的视觉体验。这个"js+css点击弹出遮罩层图片放大展示demo"正是...

    图片点击可全屏、缩小预览

    "图片点击可全屏、缩小预览"这个特性就是为了让用户更加便捷、舒适地查看和交互图片。这一功能广泛应用于各种网页、应用程序以及桌面软件中，旨在提供一个灵活且直观的方式来欣赏图像。 首先，我们来详细讨论“图片...

    手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果

    点击其中一张照片可放大，可支持图片文字描述： 同时支持分享功能： 支持手势放大缩小 使用js框架是PhotoSwipe。  PhotoSwipe是一个图片放大插件，兼容pc和移动端，经历过多个版本的迭代且一直在不断更新，踩过...

    点击图片进行预览

    在网页或应用中，当用户点击一张图片时，通常会出现一个弹出窗口或者全屏视图，以放大显示图片，以便用户可以更清晰地查看细节。这个过程涉及到的技术主要包括HTML、CSS、JavaScript，以及可能的响应式设计。 1. **...

    基于jq-viewer的pc和移动端的图片缩放，托动、旋转等

    【基于jq-viewer的PC和移动端图片操作详解】 在网页开发中，图片的展示和交互是不可或缺的一部分。jq-viewer是基于jQuery库封装的一个高效、轻量级的图片查看器插件，它提供了丰富的功能，如图片的缩放、拖动、旋转...

    移动端点击图片放大特效PhotoSwipe.js插件实现

    PhotoSwipe.js 是一个专为移动端设计的轻量级图片查看器插件，它能够实现用户在手机或平板设备上点击图片后进行全屏展示，并且支持手势操作，如滑动切换图片、双击放大等。这个插件非常适合用于网站或者APP中，提升...

    支持移动端的仿medium图片放大预览js插件

    MediumLightbox是一款专为移动端设计的JavaScript插件，其灵感来源于知名的在线出版平台Medium，它提供了类似的功能，即当用户点击网页中的图片时，图片能够平滑地过渡并放大到屏幕中央展示，提供一个优雅的全屏预览...

    photoswipe之移动端图片放大查看，保存到本地

    当用户点击图片时，Photoswipe会弹出一个全屏的图片查看器，用户可以通过双指捏合手势来放大或缩小图片，也可以通过平移来查看图片的不同部分。这种交互方式让用户能够清晰地查看图片的每一个细节。 4. **滑动切换...

    移动端评论弹窗图片浏览模块

    通过点击图片，弹出一个全屏预览窗口，用户可以在此窗口中进行图片的滑动浏览，实现类似相册的效果。这一功能对于提升用户在移动端的交互体验至关重要。 二、jQuery库的应用 jQuery是一个广泛使用的JavaScript库，...

    基于JavaScript实现移动端点击图片查看大图点击大图隐藏

    在JavaScript部分，作者定义了一个名为“ImgZoomIn”的函数，这个函数的作用是为当前被点击的图片元素创建一个全屏的遮罩层和一个放大显示的图片元素。具体来说，这个函数首先检查页面上是否已经存在遮罩层和放大...

Magicbox
Global site tag (gtag.js) - Google Analytics