tga缩略图预览_甜蜜的缩略图预览库

tga缩略图预览

View demo 查看演示 Download Source 下载源

In this tutorial we will create an image gallery with jQuery that shows a preview of each image as a little thumbnail. The idea is to hover over the slider dots and make the regarding thumbnail slide into the previewer. When clicking a slider dot, the full image will slide in from the right or left side, depending on the currently viewed image.

在本教程中，我们将使用jQuery创建一个图像库，该图像库将每个图像的预览显示为一个小缩略图。 想法是将鼠标悬停在滑块点上，并使有关的缩略图滑动到预览器中。 单击滑块点时，根据当前查看的图像，整个图像将从右侧或左侧滑入。

Update: If you are interested in integrating the thumbnails preview slider you might want to check out the new post on how to use only the preview part: Thumbnails Preview Slider with jQuery

更新：如果您希望集成缩略图预览滑块，则可能要查看有关如何仅使用预览部分的新文章： jQuery缩略图预览滑块

The beautiful images are by talented geishaboy500 and can be found here on his Flickr Photostream.

精美的图像是由才华横溢的geishaboy500提供的，可以在他的Flickr Photostream上找到。

So, let’s roll!

所以，让我们滚动吧！

标记 (The Markup)

The HTML structure is going to consist of a main container which will have the image wrapper for the big image, the navigation items and the dot list with the thumbnail preview:

HTML结构将由一个主容器组成，该容器将具有大图像的图像包装器，导航项以及带有缩略图预览的点列表：

<div id="ps_container" class="ps_container">
	<div class="ps_image_wrapper">
		<!-- First initial image -->
		<img src="images/1.jpg" alt="" />
	</div>
	<!-- Navigation items -->
	<div class="ps_next"></div>
	<div class="ps_prev"></div>
	<!-- Dot list with thumbnail preview -->
	<ul class="ps_nav">
		<li class="selected">
			<a href="images/1.jpg" rel="images/thumbs/1.jpg">Image 1</a>
		</li>
		<li>
			<a href="images/2.jpg" rel="images/thumbs/2.jpg">Image 2</a>
		</li>
		...
		<li class="ps_preview">
			<div class="ps_preview_wrapper">
				<!-- Thumbnail comes here -->
			</div>
			<!-- Little triangle -->
			<span></span>
		</li>
	</ul>
</div>

The thumbnail preview element will be a list item in the dot list. It’s going to have a special class since we want to treat this element differently. Each dot list item will contain a link element which will hold the information on the thumbnail image and the big image. Using JavaScript, we will extract that path information from the attributes and create the image elements dynamically.

缩略图预览元素将是点列表中的列表项。 因为我们要区别对待这个元素，所以它将有一个特殊的类。 每个点列表项都将包含一个链接元素，该元素将保留有关缩略图图像和大图像的信息。 使用JavaScript，我们将从属性中提取路径信息并动态创建图像元素。

Let’s take a look at the style.

让我们看一下样式。

CSS (The CSS)

First, we will style the main container. Since our images have a maximum width of 680 pixel and a maximum height of 450 pixel, we will define the following values for the container (leaving some space for the dot list):

首先，我们将为主容器设置样式。 由于我们的图像最大宽度为680像素，最大高度为450像素，因此我们将为容器定义以下值(为点列表留出一些空间)：

.ps_container{
	display:none;
	width:680px;
	height:500px;
	margin:20px auto 0px auto;
	position:relative;
}

Now we will style the wrapper for the full images. Here we really set the exact maximum dimensions and say that the overflow is hidden. We do that because we want to be able to put two images inside of this wrapper but cut off the overflow. In our JS function we will animate the images so that the current one gets revealed. We will center the wrapper by setting the left and right margins to “auto”:

现在，我们将为完整图像设置包装样式。 在这里，我们确实设置了确切的最大尺寸，并说溢出是隐藏的。 之所以这样做，是因为我们希望能够将两个图像放入此包装器中，但要避免溢出。 在我们的JS函数中，我们将对图像进行动画处理，以便显示当前图像。 通过将左右边距设置为“自动”，我们将使包装器居中：

.ps_image_wrapper{
	width:680px;
	height:450px;
	overflow:hidden;
	position:relative;
	margin:0 auto;
	-moz-box-shadow:0px 0px 5px #999;
	-webkit-box-shadow:0px 0px 5px #999;
	box-shadow:0px 0px 5px #999;
}

The image(s) inside of the wrapper should be of position absolute since we want to animate the left value to slide in the current image and slide out the previous one:

包装器内的图像应处于绝对位置，因为我们要设置左值的动画，以在当前图像中滑动并滑出前一个图像：

.ps_image_wrapper img{
	position:absolute;
	left:0px;
	top:0px;
}

The navigation elements will have the following style:

导航元素将具有以下样式：

.ps_prev,
.ps_next{
	width:30px;
	height:59px;
	position:absolute;
	top:50%;
	margin-top:-40px;
	cursor:pointer;
	opacity:0.5;
}
.ps_prev{
	background:transparent url(../images/prev.png) no-repeat top center;
	left:-50px;
}
.ps_next{
	background:transparent url(../images/next.png) no-repeat top center;
	right:-50px;
}
.ps_prev:hover,
.ps_next:hover{
	opacity:0.9;
}

The dot list with the class “ps_nav” will be placed under the full image and centered by auto margins:

类为“ ps_nav”的点列表将放置在完整图像下方，并以自动边距为中心：

ul.ps_nav{
	list-style:none;
	margin:0;
	padding:0;
	width:170px;
	margin:20px auto;
	position:relative;
}

The dot list elements will float:

点列表元素将浮动：

ul.ps_nav li{
	float:left;
}

And the inner link elements will get the dot background image, which is a sprites image:

内部链接元素将获得点背景图像，该图像是精灵图像：

ul.ps_nav li a{
	display:block;
	text-indent:-9000px;
	width:11px;
	height:11px;
	outline:none;
	padding:0px 3px;
	background:transparent url(../images/dot.png) no-repeat top center;
}

On hover we will change the background position to show the other half:

悬停时，我们将更改背景位置以显示另一半：

ul.ps_nav li a:hover,ul.ps_nav li.selected a{
	background-position:50% -11px;
}

Our special list element, the one that will have the thumbnail preview, will be of absolute positioning. The top has a negative value, since we want to pull this element up, beyond the list. The left value will be dynamically calculated. -34.5 pixel is the left value for the preview element when we want to show it over the first dot:

我们的特殊列表元素(具有缩略图预览的元素)将绝对定位。 顶部具有负值，因为我们想将此元素拉到列表之外。 左值将被动态计算。 当我们要在第一个点上显示预览元素时，-34.5像素是其左值：

ul.ps_nav li.ps_preview{
	display:none;
	width:85px;
	height:91px;
	top:-95px;
	left:-34.5px; /*This we will calculate dynamically*/
	position:absolute;
}

The span will be the little triangle:

跨度将是小三角形：

ul.ps_nav li.ps_preview span{
	background:transparent url(../images/triangle.png) no-repeat top center;
	width:15px;
	height:6px;
	position:absolute;
	top:85px;
	left:35px;
}

The preview wrapper will function the same way like the full image wrapper. We will hide the overflow:

预览包装器的功能与完整图像包装器的功能相同。 我们将隐藏溢出：

.ps_preview_wrapper{
	width:75px;
	height:75px;
	border:5px solid #fff;
	overflow:hidden;
	position:relative;
	-moz-box-shadow:0px 0px 5px #999;
	-webkit-box-shadow:0px 0px 5px #999;
	box-shadow:0px 0px 5px #999;
}

And ultimately, we want the thumbnails to be of absolute positioning since we want to animate the left value for the sliding effect:

最后，我们希望缩略图具有绝对的位置，因为我们希望为滑动效果设置左值的动画：

.ps_preview_wrapper img{
	position:absolute;
	top:0px;
	left:0px;
}

And that’s all the style. Let add the jQuery spice!

这就是所有样式。 让我们添加jQuery香料！

JavaScript (The JavaScript)

The idea of this gallery is to show little thumbnails when hovering over a dot that represents and image.

该画廊的想法是，将鼠标悬停在代表图像的点上时，只显示少量缩略图。

When moving the cursor over the dots, we want to create a sliding animation that moves the next currently hovered thumbnail image into place. This will create a great effect, giving the illusion that we have an invisible bar of thumbnail images above the dots and our preview element makes them visible.

将光标移到点上时，我们要创建一个滑动动画，将下一个当前悬停的缩略图图像移到适当位置。 这将产生很大的效果，给人一种幻觉，即我们在点上方有一个不可见的缩略图栏，而预览元素使它们可见。

We also want the clicked image to show up by “pushing” the current one away, either from the left or from the right side.

我们还希望通过从左侧或右侧“推动”当前图像来显示单击的图像。

Both effects we will achieve by placing the images or thumbs next to each other and animating their left value accordingly.

通过将图像或拇指彼此相邻放置并相应设置其左值动画，可以实现两种效果。

So, let’s begin by caching some elements:

因此，让我们开始缓存一些元素：

var $ps_container		= $('#ps_container'),
	$ps_image_wrapper 	= $ps_container.find('.ps_image_wrapper'),
	$ps_next			= $ps_container.find('.ps_next'),
	$ps_prev			= $ps_container.find('.ps_prev'),
	$ps_nav				= $ps_container.find('.ps_nav'),
	$tooltip			= $ps_container.find('.ps_preview'),
	$ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'),
	$links				= $ps_nav.children('li').not($tooltip),
	total_images		= $links.length,
	currentHovered		= -1,
	current				= 0,
	$loader				= $('#loader');

(The loader element was not mentioned in the HTML structure since we placed it outside of the container. We want to show a loading element until all the images are loaded. In the download file you will be able to see the preload function for the images.)

(在HTML结构中未提及loader元素，因为我们将其放置在容器外部。我们希望在所有图像加载完毕之前显示一个loading元素。在下载文件中，您将能够看到图像的preload函数)

Now we need to check if the browser is a real one or, for whatever insane reason, a crappy one like, let’s say, IE:

现在，我们需要检查浏览器是否是真正的浏览器，或者出于某种疯狂的原因，是一个糟糕的浏览器，例如IE：

var ie 				= false;
if ($.browser.msie) {
	ie = true; // oh no sweet Jesus
}
if(!ie) // there is a God
	$tooltip.css({
		opacity	: 0
	}).show();

Basically, we want to give the preview element or tooltip the opacity 0 and animate it to 1 when we hover over it. Since in IE it does not help to simply add an opacity filter (elements inside are still shown) we want to use the show/hide instead of animating the opacity. So, we add display:none to the style of the class but take it out if we don’t use IE.

基本上，我们希望将预览元素或工具提示的不透明度设置为0，并在将其悬停时将其动画化为1。 由于在IE中，仅添加不透明度滤镜(仍显示内部元素)并没有帮助，我们希望使用show / hide而不是对不透明度进行动画处理。 因此，我们将display：none添加到类的样式中，但是如果不使用IE，则将其删除。

After preloading the images, we will show the container:

预加载图像后，我们将显示容器：

/*first preload images (thumbs and large images)*/
var loaded	= 0;
$links.each(function(i){
	var $link 	= $(this);
	$link.find('a').preload({
		onComplete	: function(){
			++loaded;
			if(loaded == total_images){
				//all images preloaded,
				//show ps_container and initialize events
				$loader.hide();
				$ps_container.show();
				//when mouse enters the the dots,
				//show the tooltip,
				//when mouse leaves hide the tooltip,
				//clicking on one will display the respective image
				$links.bind('mouseenter',showTooltip)
					  .bind('mouseleave',hideTooltip)
					  .bind('click',showImage);
				//navigate through the images
				$ps_next.bind('click',nextImage);
				$ps_prev.bind('click',prevImage);
			}
		}
	});
});

The function showTooltip() will show the thumbnails preview and animate it to the right place. It will also slide the thumbnails inside, either to the right or to the left, depending where we are “coming from”:

函数showTooltip()将显示缩略图预览并将其动画化到正确的位置。 还将根据我们“来自”的位置将缩略图向内或向右或向左滑动：

function showTooltip(){
	var $link			= $(this),
		idx				= $link.index(),
		linkOuterWidth	= $link.outerWidth(),
		//this holds the left value for the next position
		//of the tooltip
		left			= parseFloat(idx * linkOuterWidth) - $tooltip.width()/2 + linkOuterWidth/2,
		//the thumb image source
		$thumb			= $link.find('a').attr('rel'),
		imageLeft;

	//if we are not hovering the current one
	if(currentHovered != idx){
		//check if we will animate left->right or right->left
		if(currentHovered != -1){
			if(currentHovered < idx){
				imageLeft	= 75;
			}
			else{
				imageLeft	= -75;
			}
		}
		currentHovered = idx;

		//the next thumb image to be shown in the tooltip
		var $newImage = $('
   
   

    
    ').css('left','0px')
								   .attr('src',$thumb);

		//if theres more than 1 image
		//(if we would move the mouse too fast it would probably happen)
		//then remove the oldest one (:last)
		if($ps_preview_wrapper.children().length > 1)
			$ps_preview_wrapper.children(':last').remove();

		//prepend the new image
		$ps_preview_wrapper.prepend($newImage);

		var $tooltip_imgs		= $ps_preview_wrapper.children(),
			tooltip_imgs_count	= $tooltip_imgs.length;

		//if theres 2 images on the tooltip
		//animate the current one out, and the new one in
		if(tooltip_imgs_count > 1){
			$tooltip_imgs.eq(tooltip_imgs_count-1)
						 .stop()
						 .animate({
							left:-imageLeft+'px'
						  },150,function(){
								//remove the old one
								$(this).remove();
						  });
			$tooltip_imgs.eq(0)
						 .css('left',imageLeft + 'px')
						 .stop()
						 .animate({
							left:'0px'
						  },150);
		}
	}
	//if we are not using a "browser", we just show the tooltip,
	//otherwise we fade it in
	//
	if(ie)
		$tooltip.css('left',left + 'px').show();
	else
	$tooltip.stop()
			.animate({
				left		: left + 'px',
				opacity		: 1
			},150);
}

   
   

The function hideTooltip() simply fades out the thumbnails preview (or hides it if IE):

函数hideTooltip()只是淡化缩略图预览(如果是IE，则将其隐藏)：

function hideTooltip(){
	//hide / fade out the tooltip
	if(ie)
		$tooltip.hide();
	else
	$tooltip.stop()
			.animate({
				opacity		: 0
			},150);
}

The following function will show an image in full size and animate the wrapper around to the right size. The new image will “slide into place”:

以下功能将以完整尺寸显示图像，并以合适的尺寸对包装进行动画处理。 新图像将“滑入到位”：

function showImage(e){
	var $link				= $(this),
		idx					= $link.index(),
		$image				= $link.find('a').attr('href'),
		$currentImage 		= $ps_image_wrapper.find('img'),
		currentImageWidth	= $currentImage.width();

	//if we click the current one return
	if(current == idx) return false;

	//add class selected to the current page / dot
	$links.eq(current).removeClass('selected');
	$link.addClass('selected');

	//the new image element
	var $newImage = $('
   
   

    
    ').css('left',currentImageWidth + 'px')
							   .attr('src',$image);

	//if the wrapper has more than one image, remove oldest
	if($ps_image_wrapper.children().length > 1)
		$ps_image_wrapper.children(':last').remove();

	//prepend the new image
	$ps_image_wrapper.prepend($newImage);

	//the new image width
	//this will be the new width of the ps_image_wrapper
	var newImageWidth	= $newImage.width();

	//check animation direction
	if(current > idx){
		$newImage.css('left',-newImageWidth + 'px');
		currentImageWidth = -newImageWidth;
	}
	current = idx;
	//animate the new width of the ps_image_wrapper
	//(same like new image width)
	$ps_image_wrapper.stop().animate({
		width	: newImageWidth + 'px'
	},350);
	//animate the new image in
	$newImage.stop().animate({
		left	: '0px'
	},350);
	//animate the old image out
	$currentImage.stop().animate({
		left	: -currentImageWidth + 'px'
	},350);

	e.preventDefault();
}

   
   

The navigation functions will simply trigger a click event on the dots (which we already took care of in the beginning):

导航功能将仅触发点上的click事件(我们已经在开始时进行了处理)：

function nextImage(){
	if(current < total_images){ 		$links.eq(current+1).trigger('click'); 	} } function prevImage(){ 	if(current > 0){
		$links.eq(current-1).trigger('click');
	}
}

And that’s all! We hope you enjoyed the sweet thumbnails tutorial and find it useful!

就这样！ 我们希望您喜欢甜美的缩略图教程并发现它有用！

翻译自: https://tympanus.net/codrops/2011/01/19/sweet-thumbnails-gallery/

tga缩略图预览