ZOOM – jQuery photo gallery plugin
全屏效果的 jQuery 图片切换展示插件，支持键盘前后按键切换，支持移动设备
官方网站：
http://gurde.github.io/ZOOM/
效果：
具有以下特性：
1.使用简单
2.支持前进和后退按钮进行图片切换，支持esc键关闭图片
3.图片自动调整大小适应屏幕
使用方式：
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<link rel="stylesheet" href="css/zoom.css" media="all" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/zoom.min.js"></script>
</head>
<body>
<ul class="gallery">
<li><a href="path/to/large1.jpg"><img src="path/to/thumbnail1.jpg" /></a></li>
<li><a href="path/to/large2.jpg"><img src="path/to/thumbnail2.jpg" /></a></li>
<li><a href="path/to/large3.jpg"><img src="path/to/thumbnail3.jpg" /></a></li>
<li><a href="path/to/large4.jpg"><img src="path/to/thumbnail4.jpg" /></a></li>
</ul>
</body>
</html>
注意：gallery类名比必须的，样式可以自己定义
源码为：
(function($) {
//body添加预览需要的元素
$('body').append('<div id="zoom"><a class="close"></a><a href="#previous" class="previous"></a><a href="#next" class="next"></a><div class="content loading"></div></div>');
//定义变量
var zoom = $('#zoom').hide(),
zoomContent = $('#zoom .content'),
zoomedIn = false,
openedImage = null,
windowWidth = $(window).width(),
windowHeight = $(window).height();
//此处传递的是a标签
function open(event) {
if (event)
event.preventDefault();
var link = $(this),
src = link.attr('href');
if (!src)
return;
//new Image()新建图片对象
var image = $(new Image()).hide();
//上一张 下一张按钮显示
$('#zoom .previous, #zoom .next').show();
if (link.hasClass('zoom'))
$('#zoom .previous, #zoom .next').hide();
if (!zoomedIn) {
zoomedIn = true;
zoom.show();
$('body').addClass('zoomed');
}
zoomContent.html(image).delay(500).addClass('loading');
//图片加载成功后调用rennder，并设置图片src
image.load(render).attr('src', src);
//打开openedImage变量赋值
openedImage = link;
//图片加载成功后调用的方法
function render() {
var image = $(this),
borderWidth = parseInt(zoomContent.css('borderLeftWidth')),
maxImageWidth = windowWidth - (borderWidth * 2),
maxImageHeight = windowHeight - (borderWidth * 2),
imageWidth = image.width(),
imageHeight = image.height();
if (imageWidth == zoomContent.width() && imageWidth <= maxImageWidth && imageHeight == zoomContent.height() && imageHeight <= maxImageHeight) {
show(image);
return;
}
if (imageWidth > maxImageWidth || imageHeight > maxImageHeight) {
var desiredHeight = maxImageHeight < imageHeight ? maxImageHeight : imageHeight,
desiredWidth = maxImageWidth < imageWidth ? maxImageWidth : imageWidth;
if ( desiredHeight / imageHeight <= desiredWidth / imageWidth ) {
image.width(imageWidth * desiredHeight / imageHeight);
image.height(desiredHeight);
} else {
image.width(desiredWidth);
image.height(imageHeight * desiredWidth / imageWidth);
}
}
zoomContent.animate({
width: image.width(),
height: image.height(),
marginTop: -(image.height() / 2) - borderWidth,
marginLeft: -(image.width() / 2) - borderWidth
}, 200, function() {
show(image);
});
function show(image) {
image.show();
zoomContent.removeClass('loading');
}
}
}
function openPrevious() {
var prev = openedImage.parent('li').prev();
if (prev.length == 0)
prev = $('.gallery li:last-child');
prev.find('a').trigger('click');
}
function openNext() {
var next = openedImage.parent('li').next();
if (next.length == 0)
next = $('.gallery li:first-child');
next.children('a').trigger('click');
}
//关闭图片
function close(event) {
if (event)
event.preventDefault();
zoomedIn = false;
openedImage = null;
zoom.hide();
$('body').removeClass('zoomed');
zoomContent.empty();
}
//修改图片尺寸
function changeImageDimensions() {
windowWidth = $(window).width();
windowHeight = $(window).height();
}
//闭包函数使用，立马执行，绑定键盘事件
(function bindNavigation() {
zoom.on('click', function(event) {
event.preventDefault();
if ($(event.target).attr('id') == 'zoom')
close();
});
$('#zoom .close').on('click', close);
$('#zoom .previous').on('click', openPrevious);//上一张
$('#zoom .next').on('click', openNext);//下一张
$(document).keydown(function(event) {
if (!openedImage) return;
if (event.which == 38 || event.which == 40)
event.preventDefault();
if (event.which == 27)
close();
if (event.which == 37 && !openedImage.hasClass('zoom'))
openPrevious();
if (event.which == 39 && !openedImage.hasClass('zoom'))
openNext();
});
if ($('.gallery li a').length == 1)
$('.gallery li a')[0].addClass('zoom');
//a标签点击事件，调用open方法
$('.zoom, .gallery li a').on('click', open);
})();
//闭包函数使用，立马执行绑定窗口变化
(function bindChangeImageDimensions() {
$(window).on('resize', changeImageDimensions);
})();
(function bindScrollControl() {
$(window).on('mousewheel DOMMouseScroll', function(event) {
//如果没有打开图片
if (!openedImage)
return;
event.stopPropagation();
event.preventDefault();
event.cancelBubble = false;
});
})();
})(jQuery);
相关推荐
jQuery图片插件是一种广泛应用于网页开发中的工具，它极大地简化了JavaScript操作DOM（文档对象模型）的复杂性，尤其在处理图片展示、动画效果和用户交互方面表现突出。本插件专注于实现一种分页图片向下滚动切换的...
"jQuery图片插件设置图片等比例缩放"是一个实用的功能，能够确保图片在不同尺寸的屏幕上保持其原始比例，从而避免图片变形，提供良好的视觉效果。jQuery作为一款强大的JavaScript库，提供了丰富的功能来处理DOM操作...
首先，jQuery图片插件的一大优点是它们的跨浏览器兼容性，能够很好地在各种主流浏览器上运行，包括Chrome、Firefox、Safari、Edge和Internet Explorer。这使得开发者无需担心因浏览器差异而导致的显示问题。 接下来...
在实际应用中，这个jQuery图片插件可能会使用以下技术： 1. **事件监听**：jQuery的`.on()`方法可以用来监听用户操作，如点击播放按钮或滚动鼠标，触发相应的图片操作。 2. **图片懒加载**：为了提高页面加载速度，...
接下来，我们将详细讨论jQuery图片插件的核心知识点及其在实际应用中的实现方式。 首先，jQuery库是JavaScript的一个轻量级框架，它简化了DOM操作、事件处理、动画制作和Ajax交互。jQuery图片插件就是在jQuery基础...
本篇文章将深入探讨与“jQuery图片插件”相关的知识点，特别是涉及图片放大、预览和裁剪等功能。 首先，我们来了解jQuery图片插件的基本概念。这些插件通常是开发者为扩展jQuery功能而编写的代码片段，它们专门针对...
本压缩包文件"jquery图片插件设置图片等比例缩放.rar"主要涉及到jQuery插件的使用，用于实现图片在不同设备和屏幕尺寸上等比例缩放的效果，这在响应式网页设计中尤为重要。 首先，我们需要理解jQuery是什么。jQuery...
jQuery图片插件是一种广泛应用于网页开发中的工具，它极大地简化了HTML文档操作、事件处理、动画设计和Ajax交互。在本话题中，我们将探讨两个关键的jQuery应用：Flash翻书效果和jQuery UI实现的图片裁切功能。 首先...
本文将深入探讨标题和描述中提到的"jquery图片插件旋转、拖动、滑动条、数字输入框"相关知识点，并提供实现这些功能的详细解析。 1. **jQuery图片插件**： jQuery图片插件是为了增强网页中的图像展示效果而设计的...
总结来说，jQuery图片裁剪插件是一种强大的工具，它利用jQuery库简化了图片裁剪功能的实现，提高了用户体验。通过合理地配置和集成，开发者可以在各种应用场景中，如在线照片编辑、头像上传、产品图片处理等，轻松...
**jQuery图片预览插件详解** 在Web开发中，图片预览功能是用户交互体验的重要组成部分，尤其是在上传图片或展示图片集时。jQuery作为一个轻量级的JavaScript库，提供了丰富的插件来增强这一功能。本篇文章将深入...
FullscreenGalleryThumbnailFlip.zip FullPageImageGallery.zip MergingImageBoxes.zip buildinternet-mosaic-ef45e11.zip woothemes-FlexSlider-23b22ac.zip jcobb-basic-jquery-slider-...等47个jQuery图片特效插件
jquery图片展示插件 jquery图片弹出框插件 jquery图片排序过滤 jquery图片放大 jquery图片滑动效果 jquery城市二级联动 jquery多值输入插件 jquery多级菜单导航 jquery大转盘game jquery实现网易邮箱首页插件 jquery...
【jQuery图片裁剪插件详解】 在Web开发中，用户经常需要上传并编辑图片，例如在个人资料设置、产品发布或社交媒体应用中。基于jQuery的图片裁剪插件为此提供了便利，它允许用户在浏览器中预览并裁剪图片，然后以所...
Image jigsaw 是 jQuery 插件，可以把图片转换成拼图。 在线演示 标签：Image
**jQuery图片自动添加水印插件详解** 在网页设计中，保护原创图片免受盗用是常见的需求，而实现这一目标的一种方法就是为图片添加水印。"jQuery图片自动添加水印插件"是一个非常实用的工具，它允许开发者轻松地在...
7. **响应式设计**：考虑到现代网页设计对移动设备的支持，大多数jQuery图片插件都支持响应式布局，能自动适应不同屏幕大小，保证在手机、平板和桌面设备上的浏览效果。 8. **性能优化**：高性能的图片展示插件会...
jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 jQuery图片特效404 jQuery图片特效CustomAnimationBanner jQuery图片特效FullPageImageGallery jQuery图片特效image Scroller图片滚动 jQuery图片特效...