Welcome, Old Sport!

项目展示画廊的制作 CSS & jQuery

by ilikecss ON 2010/12/29 5680

在本教程中我们将集合之前使用过的一些jQuery组件和一些类似网站上好的效果,制作一款多效果的展示画廊效果,功能包括悬停缩放以及Fancybox插件效果。
jQuery脚本集成时,它有时会发生有冲突,是因为一些共同的属性或者因为一些特定的结构。在本教程中,我修改了几个jQuery的代码使其能够互相包容结合。OK,让我们开始吧。

portfolio-slider-gallery

Step1. 创建HTML

<div class="item">
	<div class="thumb_wrapper">
		<div class="thumb">
			<ul>
				<li>
					<a href="images/club_campari1">
						<img src="images/thumbs/club_campari1" alt="club_campari 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 Title</h2>
		<p>Some description</p>
	</div>
</div>

Step2. 创建CSS

.item{
float: left;
width: 100%;
clear: both;
margin: 35px 0px;
position: relative;
}
.thumb_wrapper{
width: 290px;
height: 107px;
position:relative;
float: left;
}
.thumb_wrapper a.prev,
.thumb_wrapper a.next{
width: 30px;
height: 30px;
position: absolute;
top: 40px;
outline: none;
cursor: pointer;
}
.thumb_wrapper a.prev{
left: 0px;
background: url(../images/fancy_nav_left.gif) no-repeat top left;
}
.thumb_wrapper a.next{
right: 0px;
background: url(../images/fancy_nav_right.gif) 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;
position: relative;
}
.thumb ul{
list-style: none;
width: 800px;
height: 107px;
}
.thumb ul li{
float: left;
}
.thumb ul li a img{
border: 5px solid #fff;
}
.description {
width: 420px;
float: right;
line-height: 2em;
}
.description p {
color: #BBB;
}
.description a {
color:#EEE;
font-size: 16px;
font-weight:bold;
text-decoration:none;
text-shadow:1px 1px 1px #000000;
}
.description a:hover {
color: #999;
text-shadow: none;
}

Step3. 插入jQuery和脚本包

插入脚本之前需要插入jQuery插件的专用CSS包。

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

然后是脚本:

$(function() {
/*
fancybox init on each cloud-zoom element fancybox初始元素
*/
$("#content .cloud-zoom").fancybox({
'transitionIn'	:	'elastic',
'transitionOut'	:	'none',
'speedIn'		:	600,
'speedOut'		:	200,
'overlayShow'	:	true,
'overlayColor'	:	'#000',
'cyclic'		:	true,
'easingIn'		:	'easeInOutExpo'
});

/*
because the cloud zoom plugin draws a mousetrap
div on top of the image, the fancybox click needs
to be changed. What we do here is to trigger the click
the fancybox expects, when we click the mousetrap div.
We know the mousetrap div is inserted after
the <a> we want to click: 定义需要使用fancybox插件的元素ID及A标签事件
*/
$("#content .mousetrap").live('click',function(){
$(this).prev().trigger('click');
});

/*
the content element;
each list item / group with several images 
内容元素,每一个项目或组的图像
*/
var $content	= $('#content'),
$thumb_list = $content.find('.thumb > ul');
/*
we need to set the width of each ul (sum of the children width);
we are also defining the click events on the right and left arrows
of each item. 
设置每一个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);
$('<img/>').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'));
});
});
});

最后是脚本包:

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



TOP