<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Portfolio Zoom Slider with jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Portfolio Zoom Slider with jQuery" />
<meta name="keywords" content="jquery, plugin, slider, zoom, portfolio, cloud-zoom"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<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" />
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1',{ textShadow: '1px 1px #D1EF95'});
Cufon.replace('h2',{ textShadow: '1px 1px #D1EF95'});
Cufon.replace('.footer');
</script>
</head>
<body>
<div class="wrapper">
<h1>Portfolio Slider Demo</h1>
<h2>Mini Slider with jQuery</h2>
<div class="line"></div>
<p class="intro">
This demo shows the integration of a tiny jQuery slider with the jQuery Fancybox Plugin and the Cloud Zoom Plugin.
You can navigate through the thumbnails and see a zoomed version when you hover over them. When clicked, the full image is shown
using the Fancybox Plugin.
</p>
<div class="line"></div>
<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/formstack1.jpg"><img src="images/thumbs/formstack1.jpg" alt="Formstack 1"/></a></li>
<li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/formstack2.jpg"><img src="images/thumbs/formstack2.jpg" alt="Formstack 2"/></a></li>
<li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/formstack3.jpg"><img src="images/thumbs/formstack3.jpg" alt="Formstack 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>Formstack</h2>
<p>Quickly create any type of web form with our easy to use drag and drop form builder.
Seamlessly create HTML forms and embed them on your website or use style templates
to match your color, logo and overall look and feel.</p>
<a href="http://www.formstack.com">http://www.formstack.com</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/knowapp1.jpg"><img src="images/thumbs/knowapp1.jpg" alt="Knowapp 1"/></a></li>
<li><a rev="group2" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/knowapp2.jpg"><img src="images/thumbs/knowapp2.jpg" alt="Knowapp 2"/></a></li>
<li><a rev="group2" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/knowapp3.jpg"><img src="images/thumbs/knowapp3.jpg" alt="Knowapp 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>Know!</h2>
<p>Track and share status of just about anything. Know! simplifies the time-consuming
task of relaying the state of projects by consolidating information into
easy-to-follow dashboards.</p>
<a href="http://www.knowapp.com/">http://www.knowapp.com/</a>
</div>
</div>
<div class="clear"></div>
<div class="line"></div>
<p class="intro">
For this demo we are showing you some of our sponsors, they have been a great support for our blog, so we thought
we could give something back in a fashionable way :)
</p>
</div>
</div>
<div class="footer">
<a href="http://tympanus.net/codrops/2010/12/27/portfolio-zoom-slider/">back to the Codrops tutorial</a>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="js/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>
<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>
</html>
jQuery产品图片放大浏览插件
4星 · 超过85%的资源 需积分: 9 30 浏览量
2012-12-01
10:48:48
上传
评论
收藏 757KB RAR 举报 
jQuery产品图片放大浏览插件.rar （47个子文件） 
PortfolioZoomSlider images 
knowapp1.jpg 85KB
fancy_nav_right.png 1KB thumbs knowapp1.jpg 10KB formstack3.jpg 15KB knowapp3.jpg 9KB knowapp2.jpg 8KB formstack2.jpg 13KB formstack1.jpg 15KB formstack3.jpg 145KB knowapp3.jpg 58KB fancy_nav_left.png 1KB knowapp2.jpg 59KB bg.jpg 22KB formstack2.jpg 111KB formstack1.jpg 134KB
Thumbs.db 22KB js jquery-1.4.4.min.js 77KB ChunkFive_400.font.js 16KB cufon-yui.js 18KB cloud-zoom cloud-zoom.css 848B cloud-zoom.1.0.2.js 15KB css style.css 2KB fancybox fancy_title_main.png 96B fancy_close.png 1KB jquery.fancybox-1.3.4.js 29KB fancy_title_left.png 503B fancy_nav_right.png 1KB fancybox-y.png 176B fancybox-x.png 203B fancy_shadow_w.png 103B
blank.gif 43B fancy_shadow_n.png 106B jquery.mousewheel-3.0.4.pack.js 1KB fancy_shadow_sw.png 340B fancy_title_right.png 506B fancy_shadow_s.png 111B fancy_nav_left.png 1KB jquery.easing-1.3.pack.js 7KB fancy_loading.png 10KB fancy_shadow_nw.png 324B fancy_shadow_e.png 107B fancy_shadow_ne.png 347B fancy_title_over.png 70B fancy_shadow_se.png 352B jquery.fancybox-1.3.4.css 9KB fancybox.png 15KB
index.html 8KB
- 1
- 2
前往页