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創(chuàng)建一個圖像庫，該圖像庫將每個圖像的預覽顯示為一個小縮略圖。 想法是將鼠標懸停在滑塊點上，并使有關的縮略圖滑動到預覽器中。 單擊滑塊點時，根據(jù)當前查看的圖像，整個圖像將從右側或左側滑入。

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.

縮略圖預覽元素將是點列表中的列表項。 因為我們要區(qū)別對待這個元素，所以它將有一個特殊的類。 每個點列表項都將包含一個鏈接元素，該元素將保留有關縮略圖圖像和大圖像的信息。 使用JavaScript，我們將從屬性中提取路徑信息并動態(tài)創(chuàng)建圖像元素。

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”:

現(xiàn)在，我們將為完整圖像設置包裝樣式。 在這里，我們確實設置了確切的最大尺寸，并說溢出是隱藏的。 之所以這樣做，是因為我們希望能夠將兩個圖像放入此包裝器中，但要避免溢出。 在我們的JS函數(shù)中，我們將對圖像進行動畫處理，以便顯示當前圖像。 通過將左右邊距設置為“自動”，我們將使包裝器居中：

.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:

包裝器內(nèi)的圖像應處于絕對位置，因為我們要設置左值的動畫，以在當前圖像中滑動并滑出前一個圖像：

.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:

內(nèi)部鏈接元素將獲得點背景圖像，該圖像是精靈圖像：

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:

我們的特殊列表元素(具有縮略圖預覽的元素)將絕對定位。 頂部具有負值，因為我們想將此元素拉到列表之外。 左值將被動態(tài)計算。 當我們要在第一個點上顯示預覽元素時，-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.

將光標移到點上時，我們要創(chuàng)建一個滑動動畫，將下一個當前懸停的縮略圖圖像移到適當位置。 這將產(chǎn)生很大的效果，給人一種幻覺，即我們在點上方有一個不可見的縮略圖欄，而預覽元素使它們可見。

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.

通過將圖像或拇指彼此相鄰放置并相應設置其左值動畫，可以實現(xiàn)兩種效果。

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結構中未提及l(fā)oader元素，因為我們將其放置在容器外部。我們希望在所有圖像加載完畢之前顯示一個loading元素。在下載文件中，您將能夠看到圖像的preload函數(shù))

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:

現(xiàn)在，我們需要檢查瀏覽器是否是真正的瀏覽器，或者出于某種瘋狂的原因，是一個糟糕的瀏覽器，例如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中，僅添加不透明度濾鏡(仍顯示內(nèi)部元素)并沒有幫助，我們希望使用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”:

函數(shù)showTooltip()將顯示縮略圖預覽并將其動畫化到正確的位置。 還將根據(jù)我們“來自”的位置將縮略圖向內(nèi)或向右或向左滑動：

function showTooltip(){var $link = $(this),idx = $link.index(),linkOuterWidth = $link.outerWidth(),//this holds the left value for the next position//of the tooltipleft = 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 oneif(currentHovered != idx){//check if we will animate left->right or right->leftif(currentHovered != -1){if(currentHovered < idx){imageLeft = 75;}else{imageLeft = -75;}}currentHovered = idx;//the next thumb image to be shown in the tooltipvar $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 inif(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):

函數(shù)hideTooltip()只是淡化縮略圖預覽(如果是IE，則將其隱藏)：

function hideTooltip(){//hide / fade out the tooltipif(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 returnif(current == idx) return false;//add class selected to the current page / dot$links.eq(current).removeClass('selected');$link.addClass('selected');//the new image elementvar $newImage = $('').css('left',currentImageWidth + 'px').attr('src',$image);//if the wrapper has more than one image, remove oldestif($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_wrappervar newImageWidth = $newImage.width();//check animation directionif(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):

導航功能將僅觸發(fā)點上的click事件(我們已經(jīng)在開始時進行了處理)：

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!

就這樣！ 我們希望您喜歡甜美的縮略圖教程并發(fā)現(xiàn)它有用！

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

tga縮略圖預覽

總結

以上是生活随笔為你收集整理的tga缩略图预览_甜蜜的缩略图预览库的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。