jquery图片预览_使用jQuery突出显示和预览图像

jquery图片预览

View demo 查看演示 Download Source 下载源

In this tutorial we will show you how to highlight and preview images that are integrated in an article or spread over a page. This is a nice way to allow users to view a bigger version of an image that is relevant to some context. We will highlight images on a delayed hover and offer a preview mode which will enlarge and center the bigger version of the image on the screen.

在本教程中，我们将向您展示如何突出显示和预览集成在文章中或分布在页面上的图像。 这是允许用户查看与某些上下文相关的图像的较大版本的好方法。 我们将在延迟的悬停上突出显示图像，并提供预览模式，该模式将在屏幕上放大并放大图像的较大版本。

Let’s start!

开始吧！

标记 (The Markup)

For the HTML structure we simply need to consider the image and its class. The image can be placed anywhere in your website:

对于HTML结构，我们只需要考虑图像及其类。 该图像可以放置在您网站的任何位置：

<img src="images/thumbs/1.jpg" alt="images/1.jpg" class="ih_image"/>

We use the alt attribute to add the reference to the bigger image.

我们使用alt属性将参考添加到更大的图像。

We will also add an overlay element before the body ends:

我们还将在主体结束之前添加一个overlay元素：

<div id="ih_overlay" class="ih_overlay" style="display:none;"></div>

The structure that we will be creating with the JavaScript will look as follows:

我们将使用JavaScript创建的结构如下所示：

<div id="ih_clone" class="ih_image_clone_wrap">
	<span class="ih_close"></span>
	<img class="preview" src="images/1.jpg">
</div>

This structure will not be placed in our HTML – it will be created dynamically.

该结构不会放置在我们HTML中-它会动态创建。

Now, let’s take a look at the style.

现在，让我们看一下样式。

CSS (The CSS)

First, we will define the style for the overlay:

首先，我们将定义叠加层的样式：

.ih_overlay{
	position:fixed;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	background:#000;
	z-index:10;
	opacity:0.9;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}

The filter property is used for applying transparency in IE. We make the overlay fixed in order to always be shown, even if we scroll the page.

filter属性用于在IE中应用透明度。 我们固定覆盖层以便始终显示，即使滚动页面也是如此。

The image that we want to apply our effect to will have the following style:

我们要对其应用效果的图像将具有以下样式：

img.ih_image{
	margin:10px 0px;
	position:relative;
	-moz-box-shadow:1px 1px 4px #000;
	-webkit-box-shadow:1px 1px 4px #000;
	box-shadow:1px 1px 4px #000;
	opacity:0.7;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

It’s pretty plain, we just add some box shadow to it.

很简单，我们只添加一些盒子阴影。

In our JavaScript we will create a wrapper that contains a clone of the image that we are hovering. It will get the same positions as the current image. That’s why we do not define the top and left here, but dynamically in the JS.

在我们JavaScript中，我们将创建一个包装，其中包含我们正在悬停的图像的克隆。 它将获得与当前图像相同的位置。 这就是为什么我们没有在此处定义顶部和左侧，而是在JS中动态定义的原因。

.ih_image_clone_wrap{
	position:absolute;
	z-index:11;
}

We will also add some spans with icons that will either show a magnifying glass, a loading image or a cross. We define all common properties as follows:

我们还将添加一些带有图标的跨度，这些图标将显示放大镜，加载图像或十字形。 我们定义所有通用属性，如下所示：

.ih_image_clone_wrap span.ih_zoom,
.ih_image_clone_wrap span.ih_loading,
.ih_image_clone_wrap span.ih_close{
	position:absolute;
	top:10px;
	right:10px;
	width:24px;
	height:24px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	opacity:0.8;
	cursor:pointer;
	-moz-box-shadow:1px 1px 2px #000;
	-webkit-box-shadow:1px 1px 2px #000;
	box-shadow:1px 1px 2px #000;
	z-index:999;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}

The specific properties for each class, like the background, will be defined as follows:

每个类的特定属性(如背景)将定义如下：

.ih_image_clone_wrap span.ih_zoom{
	background:#000 url(../icons/zoom.png) no-repeat center center;
}
.ih_image_clone_wrap span.ih_loading{
	background:#000 url(../icons/loader.gif) no-repeat center center;
}
.ih_image_clone_wrap span.ih_close{
	background:#000 url(../icons/close.png) no-repeat center center;
}
.ih_image_clone_wrap img{
	opacity:0.7;
	-moz-box-shadow:1px 1px 10px #000;
	-webkit-box-shadow:1px 1px 10px #000;
	box-shadow:1px 1px 10px #000;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

The full sized image that we will load on top of the thumbnail, will have the following style:

我们将在缩略图上方加载的全尺寸图片将具有以下样式：

.ih_image_clone_wrap img.preview{
	opacity:1;
	position:absolute;
	top:0px;
	left:0px;
}

And now, let’s add some magic!

现在，让我们添加一些魔术！

JavaScript (The JavaScript)

In our jQuery function we will start by defining a variable to control the timing of the highlight effect. When we hover over an image with the specific class we create our div with the class ih_image_clone_wrap and define its position by getting the position of the current image.

在我们的jQuery函数中，我们将首先定义一个变量来控制突出显示效果的时间。 当我们将鼠标悬停在具有特定类的图像上时，我们将使用类ih_image_clone_wrap创建div并通过获取当前图像的位置来定义其位置。

/**
* timeout to control the display of the overlay/highlight
*/
var highlight_timeout;

/**
* user hovers one image:
* create a absolute div with the same image inside,
* and append it to the body
*/
$('img.ih_image').bind('mouseenter',function () {
		var $thumb = $(this);

		var $clone = $('<div />',{
			'id'		: 'ih_clone',
			'className'	: 'ih_image_clone_wrap',
			'html'     	: '<img src="' + $thumb.attr('src') + '" alt="' + $thumb.attr('alt') + '"/><span class="ih_zoom"></span>',
			'style'		: 'top:' + $thumb.offset().top + 'px;left:' + $thumb.offset().left + 'px;'
		});

		var highlight = function (){
			$('#ih_overlay').show();
			$('BODY').append($clone);
		}
		//show it after some time ...
		highlight_timeout = setTimeout(highlight,700);

		/**
		* when we click on the zoom,
		* we display the image in the center of the window,
		* and enlarge it to the size of the real image,
		* fading this one in, after the animation is over.
		*/
		$clone.find('.ih_zoom').bind('click',function(){
			var $zoom = $(this);
			$zoom.addClass('ih_loading').removeClass('ih_zoom');
			var imgL_source = $thumb.attr('alt');

			$('<img class="ih_preview" style="display:none;"/>').load(function(){
				var $imgL = $(this);
				$zoom.hide();
				var windowW = $(window).width();
				var windowH = $(window).height();
				var windowS = $(window).scrollTop();

				$clone.append($imgL).animate({
					'top'			: windowH/2 + windowS + 'px',
					'left'			: windowW/2  + 'px',
					'margin-left'	: -$thumb.width()/2 + 'px',
					'margin-top'	: -$thumb.height()/2 + 'px'
				},400,function(){
					var $clone = $(this);
					var largeW = $imgL.width();
					var largeH = $imgL.height();
					$clone.animate({
						'top'			: windowH/2 + windowS + 'px',
						'left'			: windowW/2  + 'px',
						'margin-left'	: -largeW/2 + 'px',
						'margin-top'	: -largeH/2 + 'px',
						'width'			: largeW + 'px',
						'height'		: largeH + 'px'
					},400).find('img:first').animate({
						'width'			: largeW + 'px',
						'height'		: largeH + 'px'
					},400,function(){
						var $thumb = $(this);
						/**
						* fade in the large image and
						* replace the zoom with a cross,
						* so the user can close the preview mode
						*/
						$imgL.fadeIn(function(){
							$zoom.addClass('ih_close')
								 .removeClass('ih_loading')
								 .fadeIn(function(){
									$(this).bind('click',function(){
										$clone.remove();
										clearTimeout(highlight_timeout);
										$('#ih_overlay').hide();
									});
								$(this).bind('click',function(){
									$clone.remove();
									clearTimeout(highlight_timeout);
									$('#ih_overlay').hide();
								});
							});
							$thumb.remove();
						});
					});
				});
			}).error(function(){
				/**
				* error loading image
				* maybe show a message like
				* 'no preview available'?
				*/
				$zoom.fadeOut();
			}).attr('src',imgL_source);
		});
}).bind('mouseleave',function(){
	/**
	* the user moves the mouse out of an image.
	* if there's no clone yet, clear the timeout
	* (user was probably scolling through the article, and
	* doesn't want to view the image)
	*/
	if($('#ih_clone').length) return;
	clearTimeout(highlight_timeout);
});

/**
* the user moves the mouse out of the clone.
* if we don't have yet the cross option to close the preview, then
* clear the timeout
*/
$('#ih_clone').live('mouseleave',function() {
	var $clone = $('#ih_clone');
	if(!$clone.find('.ih_preview').length){
		$clone.remove();
		clearTimeout(highlight_timeout);
		$('#ih_overlay').hide();
	}
});

And that’s all! We hope you enjoyed this tutorial and find it useful!

就这样！ 我们希望您喜欢本教程并发现它有用！

翻译自: https://tympanus.net/codrops/2010/07/04/image-highlighting-preview/

jquery图片预览