tga縮略圖預(yù)覽

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)建一個(gè)圖像庫(kù)，該圖像庫(kù)將每個(gè)圖像的預(yù)覽顯示為一個(gè)小縮略圖。 想法是將鼠標(biāo)懸停在滑塊點(diǎn)上，并使有關(guān)的縮略圖滑動(dòng)到預(yù)覽器中。 單擊滑塊點(diǎn)時(shí)，根據(jù)當(dāng)前查看的圖像，整個(gè)圖像將從右側(cè)或左側(cè)滑入。

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

更新：如果您希望集成縮略圖預(yù)覽滑塊，則可能要查看有關(guān)如何僅使用預(yù)覽部分的新文章： jQuery縮略圖預(yù)覽滑塊

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

精美的圖像是由才華橫溢的geishaboy500提供的，可以在他的Flickr Photostream上找到。

So, let’s roll!

所以，讓我們滾動(dòng)吧！

標(biāo)記 (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結(jié)構(gòu)將由一個(gè)主容器組成，該容器將具有大圖像的圖像包裝器，導(dǎo)航項(xiàng)以及帶有縮略圖預(yù)覽的點(diǎn)列表：

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

縮略圖預(yù)覽元素將是點(diǎn)列表中的列表項(xiàng)。 因?yàn)槲覀円獏^(qū)別對(duì)待這個(gè)元素，所以它將有一個(gè)特殊的類(lèi)。 每個(gè)點(diǎn)列表項(xiàng)都將包含一個(gè)鏈接元素，該元素將保留有關(guān)縮略圖圖像和大圖像的信息。 使用JavaScript，我們將從屬性中提取路徑信息并動(dòng)態(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):

首先，我們將為主容器設(shè)置樣式。 由于我們的圖像最大寬度為680像素，最大高度為450像素，因此我們將為容器定義以下值(為點(diǎn)列表留出一些空間)：

.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)在，我們將為完整圖像設(shè)置包裝樣式。 在這里，我們確實(shí)設(shè)置了確切的最大尺寸，并說(shuō)溢出是隱藏的。 之所以這樣做，是因?yàn)槲覀兿Ｍ軌驅(qū)蓚€(gè)圖像放入此包裝器中，但要避免溢出。 在我們的JS函數(shù)中，我們將對(duì)圖像進(jìn)行動(dòng)畫(huà)處理，以便顯示當(dāng)前圖像。 通過(guò)將左右邊距設(shè)置為“自動(dòng)”，我們將使包裝器居中：

.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)的圖像應(yīng)處于絕對(duì)位置，因?yàn)槲覀円O(shè)置左值的動(dòng)畫(huà)，以在當(dāng)前圖像中滑動(dòng)并滑出前一個(gè)圖像：

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

The navigation elements will have the following style:

導(dǎo)航元素將具有以下樣式：

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

類(lèi)為“ ps_nav”的點(diǎn)列表將放置在完整圖像下方，并以自動(dòng)邊距為中心：

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

The dot list elements will float:

點(diǎn)列表元素將浮動(dòng)：

ul.ps_nav li{float:left; }

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

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

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:

懸停時(shí)，我們將更改背景位置以顯示另一半：

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:

我們的特殊列表元素(具有縮略圖預(yù)覽的元素)將絕對(duì)定位。 頂部具有負(fù)值，因?yàn)槲覀兿雽⒋嗽乩搅斜碇狻?左值將被動(dòng)態(tài)計(jì)算。 當(dāng)我們要在第一個(gè)點(diǎn)上顯示預(yù)覽元素時(shí)，-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:

預(yù)覽包裝器的功能與完整圖像包裝器的功能相同。 我們將隱藏溢出：

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

最后，我們希望縮略圖具有絕對(duì)的位置，因?yàn)槲覀兿Ｍ麨榛瑒?dòng)效果設(shè)置左值的動(dòng)畫(huà)：

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

該畫(huà)廊的想法是，將鼠標(biāo)懸停在代表圖像的點(diǎn)上時(shí)，只顯示少量縮略圖。

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.

將光標(biāo)移到點(diǎn)上時(shí)，我們要?jiǎng)?chuàng)建一個(gè)滑動(dòng)動(dòng)畫(huà)，將下一個(gè)當(dāng)前懸停的縮略圖圖像移到適當(dāng)位置。 這將產(chǎn)生很大的效果，給人一種幻覺(jué)，即我們?cè)邳c(diǎn)上方有一個(gè)不可見(jiàn)的縮略圖欄，而預(yù)覽元素使它們可見(jià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.

我們還希望通過(guò)從左側(cè)或右側(cè)“推動(dòng)”當(dāng)前圖像來(lái)顯示單擊的圖像。

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

通過(guò)將圖像或拇指彼此相鄰放置并相應(yīng)設(shè)置其左值動(dòng)畫(huà)，可以實(shí)現(xiàn)兩種效果。

So, let’s begin by caching some elements:

因此，讓我們開(kāi)始緩存一些元素：

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結(jié)構(gòu)中未提及l(fā)oader元素，因?yàn)槲覀儗⑵浞胖迷谌萜魍獠俊Ｎ覀兿Ｍ谒袌D像加載完畢之前顯示一個(gè)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)在，我們需要檢查瀏覽器是否是真正的瀏覽器，或者出于某種瘋狂的原因，是一個(gè)糟糕的瀏覽器，例如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.

基本上，我們希望將預(yù)覽元素或工具提示的不透明度設(shè)置為0，并在將其懸停時(shí)將其動(dòng)畫(huà)化為1。 由于在IE中，僅添加不透明度濾鏡(仍顯示內(nèi)部元素)并沒(méi)有幫助，我們希望使用show / hide而不是對(duì)不透明度進(jìn)行動(dòng)畫(huà)處理。 因此，我們將display：none添加到類(lèi)的樣式中，但是如果不使用IE，則將其刪除。

After preloading the images, we will show the container:

預(yù)加載圖像后，我們將顯示容器：

/*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()將顯示縮略圖預(yù)覽并將其動(dòng)畫(huà)化到正確的位置。 還將根據(jù)我們“來(lái)自”的位置將縮略圖向內(nèi)或向右或向左滑動(dòng)：

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()只是淡化縮略圖預(yù)覽(如果是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”:

以下功能將以完整尺寸顯示圖像，并以合適的尺寸對(duì)包裝進(jìn)行動(dòng)畫(huà)處理。 新圖像將“滑入到位”：

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

導(dǎo)航功能將僅觸發(fā)點(diǎn)上的click事件(我們已經(jīng)在開(kāi)始時(shí)進(jìn)行了處理)：

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縮略圖預(yù)覽

總結(jié)

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

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