fkshl
- 浏览: 69576 次
- 性别:
- 来自: 西安
-
文章分类
最新评论
-
michelle0620：
是我这显示问题吗？怎么看不了全部
模似下拉列表框 -
ylcat：
哥们给个demo啊
JavaScript模态窗口，支持多浏览器，支持多模态窗口共存，支持局部化的模态，可随意拖动位置，支持自定义样式
<!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>
分享到：
发表评论
相关推荐
移动端点击图片会变成全屏查看的模式，然后可以进行手势缩放。微信端点击放大图片
jquery 图片点击全屏放大展示 然后点击叉叉关闭 有前进后退 和QQ相册差不多
jquery 图片点击全屏放大展示 像浏览相册一样 浏览图片
这个效果其实就和新浪微博一样的,不过做的可能没有那么好的...看网上没有这块的，要么是单独的点击图片放大，要么就是缩放的，而且缩放的例子是很多，但是效果都不好看，也不是我要的，这个就是自己结合在了一起了。
html5全屏背景图片放大切换幻灯片特效 html5全屏背景图片放大切换幻灯片特效 html5全屏背景图片放大切换幻灯片特效 html5全屏背景图片放大切换幻灯片特效
html5 svg点击图片全屏动画展开图片文字特效 html5 svg点击图片全屏动画展开图片文字特效
瀑布流排版鼠标点击全屏放大图片代码是一款采用瀑布流排版样式，鼠标点击相册可以网站全屏放大展示大图，同时也支持手机移动端网页。
远程调用国外网站服务器图片，点击图片后类似lightbox弹出图片效果，图片全屏，支持左右切换关闭功能的图片特效，懒人之家推荐下载
瀑布流排版鼠标点击全屏放大图片代码是一款采用瀑布流排版样式，鼠标点击相册可以网站全屏放大展示大图，同时也支持手机移动端网页。
这是一个点击图片全屏放大查看，再次点击全屏图片退出全屏查看。
jQuery图片列表 点击后图片动画放大 超酷 动态生成图片列表
ViewPager实现点击放大到全屏
jquery图像幻灯片全屏图片相册点击缩略图片放大查看预览 jquery图像幻灯片全屏图片相册点击缩略图片放大查看预览 jquery图像幻灯片全屏图片相册点击缩略图片放大查看预览
仿QQ空间新版相册点击图片全屏预览大图效果，可以通过在线点击预览大图
photoView 可以左右滑动图片、放大缩小、类似朋友圈图点小图全屏预览
html5图片响应式布局点击弹出大图切换特效 html5图片响应式布局点击弹出大图切换特效
pc和手机上都支持的图片全屏放大功能，封装好的js和css样式，添加标签即可使用
Unity3D脚本：点击放大图片 Posted on 2013年02月21日 by U3d / Unity3D脚本/插件/被围观 276 次 Unity3D点击
Android ImageView实现是对图片放大后可以局部的拉伸放大，双击放大
PhotoSwipe插件能实现手机端点击图片全屏放大 再双击图片放大等功能 PhotoSwipe插件官方网站 http://www.photoswipe.com/ photoswipe之移动端图片放大查看，滑动切换下一张，图片保存到本地。 <style> .pnav{...