<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Portfolio Slider Gallery with CSS & jQuery – Sunflowa Media Web Site</title>
</head>
<link rel="stylesheet" type="text/css" href="css/index.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" />
<!-- The JavaScript -->
<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>
<script type="text/javascript">
$(function() {
/*
fancybox init on each cloud-zoom element
*/
$("#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:
*/
$("#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.
*/
$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>
<body>
<h2 class="title_name">Portfolio Slider Gallery with <span>CSS & jQuery</span><small>by Sunflowa Media</small></h2>
<div id="content" class="content">
<div class="item">
<div class="thumb_wrapper">
<div class="thumb">
<ul>
<li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/club_campari1.jpg"><img src="images/thumbs/club_campari1.jpg" alt="Club Campari 1"/></a></li>
<li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/club_campari2.jpg"><img src="images/thumbs/club_campari2.jpg" alt="Club Campari 2"/></a></li>
<li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/club_campari3.jpg"><img src="images/thumbs/club_campari3.jpg" alt="Club Campari 3"/></a></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>Club Campari</h2>
<p>Club Campari, the one and only glamour club of the web, where you are the DJ of your dancefloor, the bartender of your lounge bar, the object of seduction of Red Passion.</p>
<a href="http://www.joinourclub.net/" target="_blank">http://www.joinourclub.net/</a>
</div>
</div>
<div class="item">
<div class="thumb_wrapper">
<div class="thumb">
<ul>
<li><a rev="group2" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/reinvented1.jpg"><img src="images/thumbs/reinvented1.jpg" alt="FIREFALL 1"/></a></li>
<li><a rev="group2" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/reinvented2.jpg"><img src="images/thumbs/reinvented2.jpg" alt="FIREFALL 2"/></a></li>
<li><a rev="group2" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/reinvented3.jpg"><img src="images/thumbs/reinvented3.jpg" alt="FIREFALL 3"/></a></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>FIREFALL</h2>
<p>A team-based action shooter from Red 5 Studios with deep character progression. Vast open-world co-op with competitive multiplayer.</p>
<a href="http://www.firefallthegame.com/" target="_blank">http://www.firefallthegame.com/</a>
</div>
</div>
<p class="copy_right">Check out <a href="http://www.sunflowamedia.com/blog/">Sunflowa Media Blog</a> for more tutorials!</p>
</div>
</body>
</html>
基于jquery的项目展示画廊效果的制作.zip
版权申诉
132 浏览量
2022-11-10
00:25:49
上传
评论
收藏 822KB ZIP 举报
基于jquery的项目展示画廊效果的制作.zip （45个子文件） 
132689938407810253 likecs.com_132689938452493085 PortfolioSliderGallery css 
jquery.fancybox-1.3.4.css 9KB cloud-zoom.css 848B index.css 3KB images 
fancy_nav_left.png 1KB
fancy_nav_left.gif 1KB
club_campari2.jpg 108KB reinvented1.jpg 76KB club_campari1.jpg 143KB club_campari3.jpg 133KB reinvented2.jpg 83KB fancy_nav_right.png 1KB thumbs club_campari2.jpg 15KB reinvented1.jpg 15KB club_campari1.jpg 20KB club_campari3.jpg 18KB reinvented2.jpg 16KB reinvented3.jpg 13KB fancy_nav_right.gif 1KB dark_texture.jpg 45KB reinvented3.jpg 69KB
index.html 8KB js jquery.fancybox-1.3.4.js 29KB jquery.easing-1.3.pack.js 7KB cloud-zoom.1.0.2.js 15KB jquery.mousewheel-3.0.4.pack.js 1KB fancybox fancy_nav_left.png 1KB fancy_shadow_nw.png 324B fancy_shadow_w.png 103B blank.gif 43B fancy_close.png 1KB fancy_title_right.png 506B fancy_shadow_s.png 111B fancy_shadow_sw.png 340B fancy_nav_right.png 1KB fancy_title_over.png 70B fancybox-x.png 203B fancybox.png 15KB fancy_loading.png 10KB fancy_shadow_e.png 107B fancy_shadow_n.png 106B fancy_title_main.png 96B fancybox-y.png 176B fancy_title_left.png 503B fancy_shadow_ne.png 347B fancy_shadow_se.png 352B资源评论
