portfolio r语言_带有jQuery的Portfolio Zoom Slider

portfolio r语言

View demo 查看演示 Download Source 下载源

In this tutorial we are going to create some nice effects for a portfolio or similar website with jQuery. We will create a tiny slider and integrate it with the amazing Cloud Zoom plugin and the elegant Fancybox plugin.

在本教程中，我们将使用jQuery为投资组合或类似网站创建一些不错的效果。 我们将创建一个微型滑块并将其与惊人的Cloud Zoom插件和优雅的Fancybox插件集成。

The idea is to give the user the option to view details of a portfolio item by zooming it on hover, and to allow a full view by clicking. Moreover, we want to have a couple of images for each item, hence we will create a slider.

这个想法是给用户一个选项，即通过将鼠标悬停在某个项目上来缩放它，以查看其详细信息，并通过单击来查看完整视图。 此外，我们希望每个项目都有几个图像，因此我们将创建一个滑块。

When integrating jQuery scripts, it sometimes happens that there are conflicts, be it because of some shared attribute or because of some specific structure that is needed by each jQuery plugin. In this tutorial we will bump into some of these conflicts and we will adapt some lines of code in order to bypass them.

集成jQuery脚本时，有时会发生冲突，这是因为某些共享属性或每个jQuery插件所需的某些特定结构。 在本教程中，我们将碰到其中的一些冲突，并改编一些代码行以绕过它们。

So, let’s start with the markup!

因此，让我们从标记开始！

标记 (The Markup)

For each item we will have a div element. There we will add an element for the thumbnails slider which we will give the class “thumb_wrapper” and an element for the description with the respective class name:

对于每个项目，我们将有一个div元素。 在那里，我们将为缩略图滑块添加一个元素，为该类提供“ thumb_wrapper”类，并为描述提供相应的类名：

<div class="item">
	<div class="thumb_wrapper">
		<div class="thumb">
			<ul>
				<li>
					<a href="images/formstack1.jpg">
						<img src="images/thumbs/formstack1.jpg" alt="Formstack 1"/>
					</a>
				</li>
				<li>...</li>
				...
			</ul>
		</div>
		<a class="prev" href="#"></a>
		<a class="next" href="#"></a>
		<span>Hover to zoom, click to view</span>
	</div>
	<div class="description">
		<h2>Portfolio Item</h2>
		<p>Some description</p>
	</div>
</div>

The link element which wraps the image will have the href pointing to the large image. Both plugins that we are using take advantage of that structure. They will build their elements with the information provided in the href attribute.

包装图像的链接元素将具有指向大图像的href。 我们正在使用的两个插件都利用了该结构。 他们将使用href属性中提供的信息来构建其元素。

Additonally, we will add the following attributes and class name to each link element:

此外，我们将向每个链接元素添加以下属性和类名称：

<a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/formstack1.jpg">...</a>

The “rel” attribute is actually used by both plugins but we will change the Fancybox plugin, so that it used the “rev” attribute instead. The Fancybox plugin can create a gallery if we give the same “rev” value to a group of images. So, our thumbnails in the first item will all have the “group1” rev value and the the thumbnails in the second item will have “group2” and so forth. For configuring the Cloud Zoom plugin, we will add some parameters to the “rel” attribute. For more information on the configuration of the plugins, please visit the Cloud Zoom plugin and Fancybox plugin websites. The position:’body’ value is an adapted value that we will come to later, when we go into the jQuery.

两个插件实际上都使用了“ rel”属性，但是我们将更改Fancybox插件，以使其改为使用“ rev”属性。 如果我们为一组图像赋予相同的“ rev”值，则Fancybox插件可以创建图库。 因此，第一项中的缩略图将全部具有“ group1” rev值，第二项中的缩略图将具有“ group2”，依此类推。 为了配置Cloud Zoom插件，我们将向rel属性添加一些参数。 有关插件配置的更多信息，请访问Cloud Zoom插件和Fancybox插件网站。 位置：“ body”值是适应的值，稍后我们将介绍jQuery。

Let’s look at the styling.

让我们看看样式。

CSS (The CSS)

First we will define the style for the item:

首先，我们将定义项目的样式：

.item{
	float:left;
	width:100%;
	clear:both;
	margin:35px 0px;
}

Now, we will position the thumb wrapper which contains the navigation and the thumbnail slider:

现在，我们将放置包含导航和缩略图滑块的缩略图包装器：

.thumb_wrapper{
	width:290px;
	height:107px;
	position:relative;
	float:left;
	margin:20px 40px 0px 0px;
}

The navigation elements will be positioned absolutely. That’s why we needed to set the parent to a relative position. The common style for both navigation elements is:

导航元素将绝对定位。 这就是为什么我们需要将父级设置为相对位置。 这两个导航元素的通用样式是：

.thumb_wrapper a.prev,
.thumb_wrapper a.next{
	width:30px;
	height:30px;
	position:absolute;
	top:50%;
	margin-top:-15px;
	outline:none;
	cursor:pointer;
}

And the individual style for each navigation element is the following:

每个导航元素的个人样式如下：

.thumb_wrapper a.prev{
	left:0px;
	background:transparent url(../images/fancy_nav_left.png) no-repeat top left;
}
.thumb_wrapper a.next{
	right:0px;
	background:transparent url(../images/fancy_nav_right.png) no-repeat top left;
}

The style for the small info span under the slider:

滑块下的小信息范围的样式：

.thumb_wrapper span{
	display:block;
	text-align:center;
	font-size:11px;
	font-style:italic;
	margin-top:3px;
}

The thumb element is the container for the unordered list of thumbnails. We will set the overflow to hidden, since we don’t want our list to show:

thumb元素是无序列表缩略图的容器。 我们将溢出设置为隐藏，因为我们不希望列表显示：

.thumb{
	margin-left:40px;
	width:210px;
	height:107px;
	overflow:hidden;
	-moz-box-shadow:1px 1px 3px #555;
	-webkit-box-shadow:1px 1px 3px #555;
	box-shadow:1px 1px 3px #555;
}

The ul for the thumbnails will have a dynamically calculated width which will overwrite the following one:

缩略图的ul将具有动态计算的宽度，该宽度将覆盖以下宽度：

.thumb ul{
	list-style:none;
	width:800px;
	height:107px;
}

The list items have to flow left so that we have all the thumbnails in a line. The idea is, to animate the ul to the right position, revealing the next/previous thumbnail in our “line”.

列表项必须向左流动，以便我们将所有缩略图排成一行。 这个想法是为了使ul动画到正确的位置，在我们的“行”中显示下一个/上一个缩略图。

.thumb ul li{
	float:left;
}

Let’s decorate the thumbnail images:

让我们装饰缩略图：

.thumb ul li a img{
	border:5px solid #fff;
}

The description will be floating right of the slider:

描述将浮动在滑块的右侧：

.description{
	width:620px;
	float:right;
}

And that was all the style! That’s take a look at the JavaScript.

这就是所有样式！ 看一下JavaScript。

JavaScript (The JavaScript)

The main idea is to create a little slider where the user can navigate through the thumbnails of a portfolio item. Then, when hovering over the thumbnail, we want a zoomed version of the hovered part of the thumbnail to appear on the right side. When clicking on a thumbnail, we want the Fancybox to appear, allowing the user to view the full image and navigate through the set.

主要思想是创建一个小滑块，用户可以在其中浏览投资组合项目的缩略图。 然后，当将鼠标悬停在缩略图上时，我们希望缩略图的悬停部分的放大版本显示在右侧。 当单击缩略图时，我们希望出现“花式框”，从而允许用户查看完整图像并浏览集合。

So, we will start by including the necessary stylesheets and scripts. First, we will add the stylesheets to the head of our HTML:

因此，我们将首先包括必要的样式表和脚本。 首先，我们将样式表添加到HTML的头部：

<link rel="stylesheet" type="text/css" href="cloud-zoom/cloud-zoom.css" />
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" />

Then, we will add all the scripts in the end of the HTML:

然后，我们将所有脚本添加到HTML的末尾：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="cloud-zoom/cloud-zoom.1.0.2.js"></script>

In our jQuery function we will first initialize the Fancybox and then we will define the functionality of the slider. As mentioned before, the Cloud Zoom plugin parameters are set in the “rel” attribute of the link element that wraps the thumbnail image.

在我们的jQuery函数中，我们将首先初始化Fancybox，然后定义滑块的功能。 如前所述，Cloud Zoom插件参数是在包装缩略图的链接元素的“ rel”属性中设置的。

Let’s initialize the Fancybox:

让我们初始化Fancybox：

$("#content .cloud-zoom").fancybox({
	'transitionIn'	:	'elastic',
	'transitionOut'	:	'none',
	'speedIn'		:	600,
	'speedOut'		:	200,
	'overlayShow'	:	true,
	'overlayColor'	:	'#000',
	'cyclic'		:	true,
	'easingIn'		:	'easeInOutExpo'
});

We need to deal with a conflict now, which is caused by the Cloud Zoom Plugin adding a div element on top of our link element. It conflicts with the Fancybox Plugin since we cannot click the link element anymore (it’s covered). So, we will add a little function that will trigger the click on the link element whenever we click on the div with the class “mousetrap” that gets generated by the Cloud Zoom Plugin:

我们现在需要处理一个冲突，这是由Cloud Zoom Plugin在我们的link元素之上添加div元素引起的。 它与Fancybox插件冲突，因为我们无法再单击link元素(已覆盖)。 因此，我们将添加一个小功能，每当我们单击由Cloud Zoom Plugin生成的类“ mousetrap”的div时，就会触发单击link元素的操作：

$("#content .mousetrap").live('click',function(){
	$(this).prev().trigger('click');
});

Now, we will define some variables for our slider:

现在，我们将为滑块定义一些变量：

var $content	= $('#content'),
$thumb_list = $content.find('.thumb > ul');

The slider ul needs to get a width assigned to it which will be the sum of the widths of each thumbnail inside. We will also define the click events on the navigation buttons:

滑块ul需要分配一个宽度，该宽度将是内部每个缩略图的宽度之和。 我们还将在导航按钮上定义click事件：

$thumb_list.each(function(){
	var $this_list	= $(this),
	total_w		= 0,
	loaded		= 0,
	//preload all the images first
	$images		= $this_list.find('img'),
	total_images= $images.length;
	$images.each(function(){
		var $img	= $(this);
		$('
   
   

    
    ').load(function(){
			++loaded;
			if (loaded == total_images){
				$this_list.data('current',0).children().each(function(){
					total_w	+= $(this).width();
				});
				$this_list.css('width', total_w + 'px');

				//next / prev events

				$this_list.parent()
				.siblings('.next')
				.bind('click',function(e){
					var current = $this_list.data('current');
					if(current == $this_list.children().length -1) return false;
					var	next	= ++current,
					ml		= -next * $this_list.children(':first').width();

					$this_list.data('current',next)
					.stop()
					.animate({
						'marginLeft'	: ml + 'px'
					},400);
					e.preventDefault();
				})
				.end()
				.siblings('.prev')
				.bind('click',function(e){
					var current = $this_list.data('current');
					if(current == 0) return false;
					var	prev	= --current,
					ml		= -prev * $this_list.children(':first').width();

					$this_list.data('current',prev)
					.stop()
					.animate({
						'marginLeft'	: ml + 'px'
					},400);
					e.preventDefault();
				});
			}
		}).attr('src',$img.attr('src'));
	});
});

   
   

And that’s all! We adapted the Fancybox script slightly in order to show the navigation arrows constantly when hovering over the full image. Also, we adapted the z-indexes of the Fancybox elements in the stylesheet (we added 10000 to each z-index) in order to work with the other elements in the page and the Cloud Zoom elements. In the Cloud Zoom script we added another case for the position, since we need to append the zoom element to the body using the absolute positions of the thumbnails.

就这样！ 我们稍微调整了Fancybox脚本，以便在将鼠标悬停在整个图像上时不断显示导航箭头。 另外，我们调整了样式表中Fancybox元素的z-indexs(向每个z-index添加10000)，以便与页面中的其他元素和Cloud Zoom元素一起使用。 在Cloud Zoom脚本中，我们为位置添加了另一种情况，因为我们需要使用缩略图的绝对位置将zoom元素附加到主体。

We hope you enjoyed the tutorial and find it useful!

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

翻译自: https://tympanus.net/codrops/2010/12/27/portfolio-zoom-slider/

portfolio r语言