jquery缩略图_jQuery的缩略图导航库

最新推荐文章于 2021-08-17 11:40:44 发布

culiao9310

最新推荐文章于 2021-08-17 11:40:44 发布

阅读量432

点赞数

文章标签：列表过滤器 css html js ViewUI

原文链接：https://tympanus.net/codrops/2010/07/29/thumbnails-navigation-gallery/

版权

jquery缩略图

View demo 查看演示 Download Source 下载源

In this tutorial we are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. We are going to use jQuery and some CSS3 properties for the style. The main idea is to have a menu of albums where each item will reveal a horizontal bar with thumbnails when clicked. The thumbnails container will scroll automatically when the user moves the mouse to the left or right.

在本教程中，我们将创建一个带有可滚动缩略图的非凡图库，这些缩略图可从导航中滑出。我们将使用jQuery和一些CSS3属性作为样式。主要思想是拥有一个相册菜单，其中每个项目在单击时都会显示带有缩略图的水平条。当用户向左或向右移动鼠标时，缩略图容器将自动滚动。

When a thumbnail is clicked it will be loaded as a full image preview in the background of the page. We will also have a text container for one of the menu items.

单击缩略图后，它将作为完整图像预览加载到页面背景中。我们还将为其中一个菜单项提供一个文本容器。

The beautiful photos are from Mark Sebastian’s photostream on Flickr. You can find all the images used in the demo in the set The “IT” Factor. Please review the Creative Commons license that is included in the demo.

美丽的照片来自Mark Sebastian在Flickr上的照片流。您可以在“ IT”因子集中找到演示中使用的所有图像。请查看演示中包含的知识共享许可。

So, let’s get started!

所以，让我们开始吧！

标记 (The Markup)

Our HTML is mainly going to consist of a wrapper and the menu list. We will have some other elements, like the full image, the loading div and the halftone overlay. First, let’s create the wrapper:

我们HTML主要由包装器和菜单列表组成。我们将具有其他一些元素，例如完整图像，加载div和半色调覆盖。首先，让我们创建包装器：

<div id="st_main" class="st_main">

</div>

Inside of our wrapper we will add the following:

在包装器内，我们将添加以下内容：

<img src="images/album/1.jpg" alt="" class="st_preview" style="display:none;"/>

<div class="st_overlay"></div>

<h1>Mark Sebastian</h1>

<div id="st_loading" class="st_loading">
	<span>Loading...</span>
</div>

The first element is our full preview image. The overlay is going to be a fixed div which will stretch over the whole screen repeating a halftone pattern to create a fancy overlay effect on the image. We also add a title and a loading div.

第一个元素是我们的完整预览图像。叠加层将是一个固定的div，它将在整个屏幕上延伸，并重复一个半色调图案，以在图像上创建精美的叠加效果。我们还添加了一个标题和一个加载div。

We then add an unordered list where each li element is going to contain a span for its title and the thumbnails wrapper. The last li element is going to contain some wrapper for text, that’s why we will not give it the class “album”. Later, in the jQuery function we will need to distinguish that.

然后，我们添加一个无序列表，其中每个li元素都将包含其标题和缩略图包装的范围。最后一个li元素将包含一些用于文本的包装器，这就是为什么我们不给它提供“专辑”类的原因。稍后，在jQuery函数中，我们需要对其进行区分。

<ul id="st_nav" class="st_navigation">
	<li class="album">
		<span class="st_link">
			Newest Collection
			<span class="st_arrow_down"></span>
		</span>
		<div class="st_wrapper st_thumbs_wrapper">
			<div class="st_thumbs">
				<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg"/>
				<img src="images/album/thumbs/2.jpg" alt="images/album/2.jpg"/>
				...
			</div>
		</div>
	</li>
	...
	<li>
		<span class="st_link">
			About
			<span class="st_arrow_down"></span>
		</span>
		<div class="st_about st_thumbs_wrapper">
			<div class="st_subcontent">
				<p>
					Some description
				</p>
			</div>
		</div>
	</li>
</ul>

The thumbnail images get the alt value of the path to the full size image. That might not be the proper use of the alt attribute, but it’s just so convenient for our functionality that we will use it this way.

缩略图图像获取到全尺寸图像的路径的alt值。那可能不是alt属性的正确使用，但是它对我们的功能是如此方便，以至于我们将以这种方式使用它。

Let’s take a look at the style.

让我们看一下样式。

CSS (The CSS)

First, let’s reset the paddings and margins for all elements and define the general styles:

首先，让我们重置所有元素的内边距和边距，并定义常规样式：

*{
	margin:0;
	padding:0;
}
body{
	font-family:"Myriad Pro","Trebuchet MS", Helvetica, sans-serif;
	font-size:16px;
	color:#fff;
	background-color:#000;
	overflow:hidden;
}
h1{
	margin:20px;
	font-size:40px;
}

Making the body overflow hidden we avoid any scroll bar appearing, but you can adapt that to your needs. I.e. if it is important that the full sized image is completely viewable by the user, you might want to remove the overflow:hidden property.

将主体溢出隐藏起来可以避免出现任何滚动条，但是您可以根据需要进行调整。也就是说，如果让用户完全可见完整尺寸的图像很重要，则可能要删除overflow：hidden属性。

Next, we will define the style for the full size image, the overlay and the loading div:

接下来，我们将定义全尺寸图片，叠加层和加载div的样式：

.st_main img.st_preview{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
}
.st_overlay{
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
	background:transparent url(../images/pattern.png) repeat-x bottom left;
	opacity:0.3;
}
.st_loading{
	position:fixed;
	top:10px;
	right:0px;
	background:#000 url(../images/icons/loader.gif) no-repeat 10px 50%;
	padding:15px 40px 15px 60px;
	-moz-box-shadow:0px 0px 2px #000;
	-webkit-box-shadow:0px 0px 2px #000;
	box-shadow:0px 0px 2px #000;
	opacity:0.6;
}

By setting the image width to be always 100%, we make sure that it occupies all the horizontal space on the page. For very large screens the image might look pixelated which can, of course, be avoided by using gigantic images. In our demo we use a maximum width of 1600 pixel to make the loading time bearable. The halftone pattern on top of the image helps a little to disguise a pixelated effect.

通过将图像宽度设置为始终为100％，我们可以确保图像占据页面上的所有水平空间。对于非常大的屏幕，图像可能看起来像是像素化的，这当然可以通过使用巨型图像来避免。在我们的演示中，我们使用最大1600像素的宽度来使加载时间可以承受。图像顶部的半色调图案有助于掩盖像素化效果。

Please note that whenever opacity is used, the IE filter property needs to be used if you want to achieve semi-transparent effects in IE. The overlay looks like crap if you use the filter property, though. Check out the ZIP file, I added the IE DXImageTransform filter to the respective styles.

请注意，无论何时使用不透明度，如果要在IE中实现半透明效果，都需要使用IE过滤器属性。但是，如果使用filter属性，则覆盖看起来像废话。检出ZIP文件，我将IE DXImageTransform过滤器添加到各个样式。

The navigation will be positioned absolutely:

导航将绝对定位：

ul.st_navigation{
	position:absolute;
	width:100%;
	top:140px;
	left:-300px;
	list-style:none;
}

The initial left value is set to -300 pixel because we want to slide it in only after our full image is loaded. If you use longer titles in the list items, you might need to adapt this value.

初始左值设置为-300像素，因为我们只想在加载完整图像后才将其滑入。如果在列表项中使用较长的标题，则可能需要调整此值。

Our list elements are going to have the following style:

我们的列表元素将具有以下样式：

ul.st_navigation li {
	float:left;
	clear:both;
	margin-bottom:8px;
	position:relative;
	width:100%;
}

The span for the title will be styled as follows:

标题的跨度样式如下：

ul.st_navigation li span.st_link{
	background-color:#000;
	float:left;
	position:relative;
	line-height:50px;
	padding:0px 20px;
	-moz-box-shadow:0px 0px 2px #000;
	-webkit-box-shadow:0px 0px 2px #000;
	box-shadow:0px 0px 2px #000;
}

Next, we define the style for the spans with the up/down arrow for opening and closing the thumbnail container:

接下来，我们使用向上/向下箭头定义跨度的样式，以打开和关闭缩略图容器：


ul.st_navigation li span.st_arrow_down,
ul.st_navigation li span.st_arrow_up{
	position:absolute;
	margin-left:15px;
	width:40px;
	height:50px;
	cursor:pointer;
	-moz-box-shadow:0px 0px 2px #000;
	-webkit-box-shadow:0px 0px 2px #000;
	box-shadow:0px 0px 2px #000;
}
ul.st_navigation li span.st_arrow_down{
	background:#000 url(../images/icons/down.png) no-repeat center center;
}
ul.st_navigation li span.st_arrow_up{
	background:#000 url(../images/icons/up.png) no-repeat center center;
}

The wrapper for the thumbnail container will be positioned absolutely and we want to hide any vertical overflow:

缩略图容器的包装将绝对放置，我们要隐藏任何垂直溢出：

.st_wrapper{
	display:none;
	position: absolute;
    width:100%;
    height:126px;
    overflow-y:hidden;
	top:50px;
    left:0px;
}

Although the thumbs are only 120 pixels high, we want to leave some space so that the box shadow of the images inside will not be cut away. The thumbnails container will simply be styled as follows:

尽管拇指只有120像素高，但我们要留一些空间，以免切掉内部图像的阴影。缩略图容器的样式如下：

.st_thumbs{
    height:126px;
    margin: 0;
}

The thumbnails will have a neat box shadow and some spacing:

缩略图将具有整洁的框阴影和一些间距：

.st_thumbs img{
    float:left;
    margin:3px 3px 0px 0px;
    cursor:pointer;
	-moz-box-shadow:1px 1px 5px #000;
	-webkit-box-shadow:1px 1px 5px #000;
	box-shadow:1px 1px 5px #000;
	opacity:0.7;
}

The st_about class is the wrapper class for the text container:

st_about类是文本容器的包装器类：

.st_about{
	display:none;
	position:absolute;
	top:50px;
    left:0px;
	opacity:0.6;
}

And, finally the text container itself:

最后，文本容器本身：

.st_subcontent{
	background:#000;
	padding:30px;
	-moz-box-shadow:0px 0px 10px #000;
	-webkit-box-shadow:0px 0px 10px #000;
	box-shadow:0px 0px 10px #000;
}

And that’s all the style! Let’s make some magic!

这就是所有样式！让我们做一些魔术！

JavaScript (The JavaScript)

In our jQuery function we will first define some variables:

在我们的jQuery函数中，我们将首先定义一些变量：

//the loading image
var $loader		= $('#st_loading');
//the ul element
var $list		= $('#st_nav');
//the current image being shown
var $currImage 	= $('#st_main').children('img:first');

The first thing that we want to do is to load the current full size image. After it’s loaded, we want the navigation to appear:

我们要做的第一件事是加载当前的全尺寸图像。加载后，我们希望导航出现：

$('<img>').load(function(){
	$loader.hide();
	$currImage.fadeIn(3000);
	//slide out the menu
	setTimeout(function(){
		$list.animate({'left':'0px'},500);
	},
	1000);
}).attr('src',$currImage.attr('src'));

The buildThumbs() function calculates the widths of all the thumbnail containers. We need that value for the automatic scrolling function later on:

buildThumbs()函数计算所有缩略图容器的宽度。稍后，我们需要该值用于自动滚动功能：

buildThumbs();

function buildThumbs(){
	$list.children('li.album').each(function(){
		var $elem 			= $(this);
		var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
		var $thumbs 		= $thumbs_wrapper.children(':first');
		//each thumb has 180px and we add 3 of margin
		var finalW 			= $thumbs.find('img').length * 183;
		$thumbs.css('width',finalW + 'px');
		//make this element scrollable
		makeScrollable($thumbs_wrapper,$thumbs);
	});
}

Next, we define the behavior of clicking on the arrows. If it’s down, we will expand the thumbnail container and hide any other. If it’s up, we will make the current container hide again.

接下来，我们定义单击箭头的行为。如果关闭，我们将展开缩略图容器并隐藏其他任何容器。如果启动，我们将再次隐藏当前容器。

$list.find('.st_arrow_down').live('click',function(){
	var $this = $(this);
	hideThumbs();
	$this.addClass('st_arrow_up').removeClass('st_arrow_down');
	var $elem = $this.closest('li');
	$elem.addClass('current').animate({'height':'170px'},200);
	var $thumbs_wrapper = $this.parent().next();
	$thumbs_wrapper.show(200);
});
$list.find('.st_arrow_up').live('click',function(){
	var $this = $(this);
	$this.addClass('st_arrow_down').removeClass('st_arrow_up');
	hideThumbs();
});

Before we define the hideThumbs() function, we specify what happens when clicking on a thumb. The full size image will show and while it’s loading we will make the loading div appear. Then we animate the opacity and fade the image in:

在定义hideThumbs()函数之前，我们指定单击拇指时会发生什么。将显示完整尺寸的图像，并且在加载时，将显示加载div。然后，为不透明度设置动画并以以下方式淡化图像：

$list.find('.st_thumbs img').bind('click',function(){
	var $this = $(this);
	$loader.show();
	$('<img class="st_preview"/>').load(function(){
		var $this = $(this);
		var $currImage = $('#st_main').children('img:first');
		$this.insertBefore($currImage);
		$loader.hide();
		$currImage.fadeOut(2000,function(){
			$(this).remove();
		});
	}).attr('src',$this.attr('alt'));
}).bind('mouseenter',function(){
	$(this).stop().animate({'opacity':'1'});
}).bind('mouseleave',function(){
	$(this).stop().animate({'opacity':'0.7'});
});

The function to hide the thumbnails looks as follows:

隐藏缩略图的功能如下所示：

function hideThumbs(){
	$list.find('li.current')
		 .animate({'height':'50px'},400,function(){
			$(this).removeClass('current');
		 })
		 .find('.st_thumbs_wrapper')
		 .hide(200)
		 .andSelf()
		 .find('.st_link span')
		 .addClass('st_arrow_down')
		 .removeClass('st_arrow_up');
}

We animate the height of the li and make the thumbnails container disappear like that. We also need to set the class for the arrow span correctly.

我们为li的高度设置动画，并使缩略图容器像这样消失。我们还需要正确设置箭头范围的类。

And finally, we will define the makeScrollable() function that automatically scrolls the thumbnails div horizontally on mouse move:

最后，我们将定义makeScrollable()函数，该函数将在鼠标移动时自动水平滚动缩略图div：

function makeScrollable($outer, $inner){
	var extra 			= 800;
	//Get menu width
	var divWidth = $outer.width();
	//Remove scrollbars
	$outer.css({
		overflow: 'hidden'
	});
	//Find last image in container
	var lastElem = $inner.find('img:last');
	$outer.scrollLeft(0);
	//When user move mouse over menu
	$outer.unbind('mousemove').bind('mousemove',function(e){
		var containerWidth = lastElem[0].offsetLeft + lastElem.outerWidth() + 2*extra;
		var left = (e.pageX - $outer.offset().left) * (containerWidth-divWidth) / divWidth - extra;
		$outer.scrollLeft(left);
	});
}

For cufonizing the titles and adding some decent shadow, we will include the following into the head of our html document:

为了简化标题并增加一些体面的阴影，我们将在html文档的开头添加以下内容：

<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Quicksand_Book_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
	Cufon.replace('span,p,h1',{
		textShadow: '0px 0px 1px #ffffff'
	});
</script>

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

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

220-702 training program to help you pass 220-702培训计划，以帮助您轻松快捷地通过 sun certification in easy and fast way. Complete your 太阳认证。使用认证的资源在几天之内完成 CISSP certification within days using certified resources. CISSP认证。

翻译自: https://tympanus.net/codrops/2010/07/29/thumbnails-navigation-gallery/

jquery缩略图

culiao9310

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery缩略图_jQuery的缩略图导航库

jquery缩略图View demo 查看演示Download Source 下载源In this tutorial we are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. We are going...
复制链接

扫一扫