在本教程中我们将创建一些不错的效果与jQuery组合或类似的网站。我们将创建一个小滑块并将其集成与神奇云变焦插件和优雅Fancybox插件.
对于每个项目,我们将有一个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>
另外,我们将添加以下属性和类名,每个链接元素:
<a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/formstack1.jpg">...</a>
CSS
首先,我们将定义的风格单品:
.item{
float:left;
width:100%;
clear:both;
margin:35px 0px;
}
现在,我们将拇指位置包装器包含导航和缩略图的滑块:
.thumb_wrapper{
width:290px;
height:107px;
position:relative;
float:left;
margin:20px 40px 0px 0px;
}
将绝对定位的导航元素。这就是为什么我们需要设置父相对位置。常见的风格的导航元素是:
.thumb_wrapper a.prev,
.thumb_wrapper a.next{
width:30px;
height:30px;
position:absolute;
top:50%;
margin-top:-15px;
outline:none;
cursor:pointer;
}
为每个导航元素和个人风格如下:
.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;
}
风格的小信息跨下的滑块:
.thumb_wrapper span{
display:block;
text-align:center;
font-size:11px;
font-style:italic;
margin-top:3px;
}
拇指的容器元素是无序列表缩略图。我们将设置溢出隐藏,因为我们不想让我们的列表显示:
.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;
}
ul的缩略图会动态地计算宽度将覆盖以下之一:
.thumb ul{
list-style:none;
width:800px;
height:107px;
}
列表项必须流了,我们一行中的所有缩略图。我们的想法是,动画ul到正确的位置,揭示未来/以前的缩略图在我们“行”。
.thumb ul li{
float:left;
}
让我们装饰缩略图:
.thumb ul li a img{
border:5px solid #fff;
}
描述将浮动的滑块:
.description{
width:620px;
float:right;
}
JAVASCRIPT
主要的想法是创建一个小滑块,用户可以浏览缩略图的组合项目。然后,悬停在缩略图的时候,我们想要一个放大版的徘徊的一部分缩略图出现在右边。点击缩略图时,我们希望Fancybox出现,允许用户查看完整图像和浏览。
所以,我们将首先包括必要的样式表和脚本。首先,我们将增加我们的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" />
然后,我们将添加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>
在我们的jQuery函数将首先初始化Fancybox然后我们将定义滑块的功能。如前所述,云变焦插件参数中设置“rel属性的链接元素包装了缩略图图像。
让我们来初始化Fancybox:
$("#content .cloud-zoom").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'none',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : true,
'overlayColor' : '#000',
'cyclic' : true,
'easingIn' : 'easeInOutExpo'
});
我们现在需要处理冲突,这是由于云变焦插件添加一个div元素的链接元素。它与Fancybox插件冲突因为我们不能点击链接元素(它的覆盖)。所以,我们将添加一个小函数,将触发点击链接每当我们点击类的div元素“捕鼠器”,生成的云缩放插件:
$("#content .mousetrap").live('click',function(){
$(this).prev().trigger('click');
});
现在,我们将为我们的滑块定义一些变量:
var $content = $('#content'),
$thumb_list = $content.find('.thumb > ul');
滑块ul需要得到一个分配给它的宽度,里面每个缩略图的宽度的总和。我们还将定义导航按钮的点击事件:
$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);
$('<img alt="">').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'));
});
});
这就是一切!我们适应Fancybox脚本稍微为了显示导航箭头经常当悬停在完整的形象。
同时,我们改编的z-indexes Fancybox样式表中的元素(我们添加了10000每个z - index)以处理页面中的其他元素和云放大元素。
在云中变焦脚本的位置我们添加了另一个理由,因为我们需要放大元素附加到身体使用缩略图的绝对位置。
