jquery图片插件

最新推荐文章于 2025-01-25 09:08:08 发布

原创最新推荐文章于 2025-01-25 09:08:08 发布 · 226 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

jquery 专栏收录该内容

51 篇文章

订阅专栏

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);