以下是 jquery全页照片墙画廊特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jquery全页照片墙画廊</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Sliding Panel Photowall Gallery with jQuery" />
<meta name="keywords" content="jquery, images, gallery, photowall, slideshow" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<style>
a {
color: #fff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
span.reference {
position: fixed;
left: 30px;
bottom: 0px;
font-size: 9px;
}
span.reference a {
color: #aaa;
}
span.reference a:hover {
color: #ddd;
text-decoration: none;
}
</style>
</head>
<body>
<div class="infobar">
<span id="description"></span>
<span id="loading">Loading Image</span>
</div>
<div id="thumbsWrapper">
<div id="content" >
<img src="thumbs/1.jpg" alt="images/1.jpg" title="Beatriz_Florido_01 © studio.es"/>
<img src="thumbs/2.jpg" alt="images/2.jpg" title="Nuria_09 © studio.es by Vincent Boiteau"/>
<img src="thumbs/3.jpg" alt="images/3.jpg" title="Nuria_08 © studio.es by Vincent Boiteau"/>
<img src="thumbs/4.jpg" alt="images/4.jpg" title="Nuria_07 © studio.es by Vincent Boiteau"/>
<img src="thumbs/5.jpg" alt="images/5.jpg" title="Nuria_06 © studio.es by Vincent Boiteau"/>
<img src="thumbs/6.jpg" alt="images/6.jpg" title="Nuria_05 © studio.es by Vincent Boiteau"/>
<img src="thumbs/7.jpg" alt="images/7.jpg" title="Nuria_04 © studio.es by Vincent Boiteau"/>
<img src="thumbs/8.jpg" alt="images/8.jpg" title="Nuria_03 © studio.es by Vincent Boiteau"/>
<img src="thumbs/9.jpg" alt="images/9.jpg" title="Nuria_02 © studio.es by Vincent Boiteau"/>
<img src="thumbs/10.jpg" alt="images/10.jpg" title="Nuria_01 © studio.es by Vincent Boiteau"/>
<img src="thumbs/11.jpg" alt="images/11.jpg" title="Janne_Nielsen_07 © studio.es by Vincent Boiteau"/>
<img src="thumbs/12.jpg" alt="images/12.jpg" title="Janne_Nielsen_03 © studio.es by Vincent Boiteau"/>
<img src="thumbs/13.jpg" alt="images/13.jpg" title="Janne_Nielsen_06 © studio.es by Vincent Boiteau"/>
<img src="thumbs/14.jpg" alt="images/14.jpg" title="Janne_Nielsen_05 © studio.es by Vincent Boiteau"/>
<img src="thumbs/15.jpg" alt="images/15.jpg" title="Janne_Nielsen_04 © studio.es by Vincent Boiteau"/>
<img src="thumbs/16.jpg" alt="images/16.jpg" title="Janne_Nielsen_01 © studio.es by Vincent Boiteau"/>
<img src="thumbs/17.jpg" alt="images/17.jpg" title="Beatriz_Ruiz_10 © studio.es by Vincent Boiteau"/>
<img src="thumbs/18.jpg" alt="images/18.jpg" title="Beatriz_Ruiz_08 © studio.es by Vincent Boiteau"/>
<img src="thumbs/19.jpg" alt="images/19.jpg" title="Beatriz_Ruiz_06 © studio.es by Vincent Boiteau"/>
<img src="thumbs/20.jpg" alt="images/20.jpg" title="Beatriz_Ruiz_05 © studio.es by Vincent Boiteau"/>
<img src="thumbs/21.jpg" alt="images/21.jpg" title="Beatriz_Ruiz_04 © studio.es by Vincent Boiteau"/>
<img src="thumbs/22.jpg" alt="images/22.jpg" title="Beatriz_Ruiz_02 © studio.es by Vincent Boiteau"/>
<img src="thumbs/23.jpg" alt="images/23.jpg" title="Beatriz_Ruiz_01 © studio.es by Vincent Boiteau"/>
<img src="thumbs/24.jpg" alt="images/24.jpg" title="Fashion 9 © studio.es by Vincent Boiteau"/>
<img src="thumbs/25.jpg" alt="images/25.jpg" title="_MG_4859 © studio.es by Vincent Boiteau"/>
<img src="thumbs/26.jpg" alt="images/26.jpg" title="_MG_4900 © studio.es by Vincent Boiteau" />
<img src="thumbs/27.jpg" alt="images/27.jpg" title="_MG_4756 © studio.es by Vincent Boiteau" />
<img src="thumbs/28.jpg" alt="images/28.jpg" title="fashion 15 © studio.es by Vincent Boiteau"/>
<img src="thumbs/29.jpg" alt="images/29.jpg" title="Fashion 6 © studio.es by Vincent Boiteau"/>
<img src="thumbs/30.jpg" alt="images/30.jpg" title="fashion 12 © studio.es by Vincent Boiteau"/>
<img src="thumbs/31.jpg" alt="images/31.jpg" title="fashion 14 © studio.es by Vincent Boiteau" />
<img src="thumbs/32.jpg" alt="images/32.jpg" title="fashion 13 © studio.es by Vincent Boiteau" />
<img src="thumbs/33.jpg" alt="images/33.jpg" title="Fashion 11 © studio.es by Vincent Boiteau" />
<img src="thumbs/34.jpg" alt="images/34.jpg" title="Fashion 10 © studio.es by Vincent Boiteau" />
<img src="thumbs/35.jpg" alt="images/35.jpg" title="Fashion 8 © studio.es by Vincent Boiteau"/>
<img src="thumbs/36.jpg" alt="images/36.jpg" title="Fashion 7 © studio.es by Vincent Boiteau" />
<img src="thumbs/1.jpg" alt="images/1.jpg" title="Beatriz_Florido_01 © studio.es"/>
<img src="thumbs/2.jpg" alt="images/2.jpg" title="Nuria_09 © studio.es by Vincent Boiteau"/>
<img src="thumbs/3.jpg" alt="images/3.jpg" title="Nuria_08 © studio.es by Vincent Boiteau"/>
<img src="thumbs/4.jpg" alt="images/4.jpg" title="Nuria_07 © studio.es by Vincent Boiteau"/>
<img src="thumbs/5.jpg" alt="images/5.jpg" title="Nuria_06 © studio.es by Vincent Boiteau"/>
<img src="thumbs/6.jpg" alt="images/6.jpg" title="Nuria_05 © studio.es by Vincent Boiteau"/>
<img src="thumbs/7.jpg" alt="images/7.jpg" title="Nuria_04 © studio.es by Vincent Boiteau"/>
<img src="thumbs/8.jpg" alt="images/8.jpg" title="Nuria_03 © studio.es by Vincent Boiteau"/>
<img src="thumbs/9.jpg" alt="images/9.jpg" title="Nuria_02 © studio.es by Vincent Boiteau"/>
<img src="thumbs/10.jpg" alt="images/10.jpg" title="Nuria_01 © studio.es by Vincent Boiteau"/>
<img src="thumbs/11.jpg" alt="images/11.jpg" title="Janne_Nielsen_07 © studio.es by Vincent Boiteau"/>
<img src="thumbs/12.jpg" alt="images/12.jpg" title="Janne_Nielsen_03 © studio.es by Vincent Boiteau"/>
<img src="thumbs/13.jpg" alt="images/13.jpg" title="Janne_Nielsen_06 © studio.es by Vincent Boiteau"/>
<img src="thumbs/14.jpg" alt="images/14.jpg" title="Janne_Nielsen_05 © studio.es by Vincent Boiteau"/>
<img src="thumbs/15.jpg" alt="images/15.jpg" title="Janne_Nielsen_04 © studio.es by Vincent Boiteau"/>
<img src="thumbs/16.jpg" alt="images/16.jpg" title="Janne_Nielsen_01 © studio.es by Vincent Boiteau"/>
<img src="thumbs/17.jpg" alt="images/17.jpg" title="Beatriz_Ruiz_10 © studio.es by Vincent Boiteau"/>
<img src="thumbs/18.jpg" alt="images/18.jpg" title="Beatriz_Ruiz_08 © studio.es by Vincent Boiteau"/>
<img src="thumbs/19.jpg" alt="images/19.jpg" title="Beatriz_Ruiz_06 © studio.es by Vincent Boiteau"/>
<img src="thumbs/20.jpg" alt="images/20.jpg" title="Beatriz_Ruiz_05 © studio.es by Vincent Boiteau"/>
<img src="thumbs/21.jpg" alt="images/21.jpg" title="Beatriz_Ruiz_04 © studio.es by Vincent Boiteau"/>
<img src="thumbs/22.jpg" alt="images/22.jpg" title="Beatriz_Ruiz_02 © studio.es by Vincent Boiteau"/>
<img src="thumbs/23.jpg" alt="images/23.jpg" title="Beatriz_Ruiz_01 © studio.es by Vincent Boiteau"/>
<img src="thumbs/24.jpg" alt="images/24.jpg" title="Fashion 9 © studio.es by Vincent Boiteau"/>
<img src="thumbs/25.jpg" alt="images/25.jpg" title="_MG_4859 © studio.es by Vincent Boiteau"/>
<img src="thumbs/26.jpg" alt="images/26.jpg" title="_MG_4900 © studio.es by Vincent Boiteau" />
<img src="thumbs/27.jpg" alt="images/27.jpg" title="_MG_4756 © studio.es by Vincent Boiteau" />
<img src="thumbs/28.jpg" alt="images/28.jpg" title="fashion 15 © studio.es by Vincent Boiteau"/>
<img src="thumbs/29.jpg" alt="images/29.jpg" title="Fashion 6 © studio.es by Vincent Boiteau"/>
<img src="thumbs/30.jpg" alt="images/30.jpg" title="fashion 12 © studio.es by Vincent Boiteau"/>
<img src="thumbs/31.jpg" alt="images/31.jpg" title="fashion 14 © studio.es by Vincent Boiteau" />
<img src="thumbs/32.jpg" alt="images/32.jpg" title="fashion 13 © studio.es by Vincent Boiteau" />
<img src="thumbs/33.jpg" alt="images/33.jpg" title="Fashion 11 © studio.es by Vincent Boiteau" />
<img src="thumbs/34.jpg" alt="images/34.jpg" title="Fashion 10 © studio.es by Vincent Boiteau" />
<img src="thumbs/35.jpg" alt="images/35.jpg" title="Fashion 8 © studio.es by Vincent Boiteau"/>
<img src="thumbs/36.jpg" alt="images/36.jpg" title="Fashion 7 © studio.es by Vincent Boiteau" />
<img src="thumbs/1.jpg" alt="images/1.jpg" title="Beatriz_Florido_01 © studio.es"/>
<img src="thumbs/2.jpg" alt="images/2.jpg" title="Nuria_09 © studio.es by Vincent Boiteau"/>
<img src="thumbs/3.jpg" alt="images/3.jpg" title="Nuria_08 © studio.es by Vincent Boiteau"/>
<img src="thumbs/4.jpg" alt="images/4.jpg" title="Nuria_07 © studio.es by Vincent Boiteau"/>
<img src="thumbs/5.jpg" alt="images/5.jpg" title="Nuria_06 © studio.es by Vincent Boiteau"/>
<img src="thumbs/6.jpg" alt="images/6.jpg" title="Nuria_05 © studio.es by Vincent Boiteau"/>
<img src="thumbs/7.jpg" alt="images/7.jpg" title="Nuria_04 © studio.es by Vincent Boiteau"/>
<img src="thumbs/8.jpg" alt="images/8.jpg" title="Nuria_03 © studio.es by Vincent Boiteau"/>
<img src="thumbs/9.jpg" alt="images/9.jpg" title="Nuria_02 © studio.es by Vincent Boiteau"/>
<img src="thumbs/10.jpg" alt="images/10.jpg" title="Nuria_01 © studio.es by Vincent Boiteau"/>
<img src="thumbs/11.jpg" alt="images/11.jpg" title="Janne_Nielsen_07 © studio.es by Vincent Boiteau"/>
<img src="thumbs/12.jpg" alt="images/12.jpg" title="Janne_Nielsen_03 © studio.es by Vincent Boiteau"/>
<img src="thumbs/13.jpg" alt="images/13.jpg" title="Janne_Nielsen_06 © studio.es by Vincent Boiteau"/>
<img src="thumbs/14.jpg" alt="images/14.jpg" title="Janne_Nielsen_05 © studio.es by Vincent Boiteau"/>
<img src="thumbs/15.jpg" alt="images/15.jpg" title="Janne_Nielsen_04 © studio.es by Vincent Boiteau"/>
<img src="thumbs/16.jpg" alt="images/16.jpg" title="Janne_Nielsen_01 © studio.es by Vincent Boiteau"/>
<img src="thumbs/17.jpg" alt="images/17.jpg" title="Beatriz_Ruiz_10 © studio.es by Vincent Boiteau"/>
<img src="thumbs/18.jpg" alt="images/18.jpg" title="Beatriz_Ruiz_08 © studio.es by Vincent Boiteau"/>
<img src="thumbs/19.jpg" alt="images/19.jpg" title="Beatriz_Ruiz_06 © studio.es by Vincent Boiteau"/>
<img src="thumbs/20.jpg" alt="images/20.jpg" title="Beatriz_Ruiz_05 © studio.es by Vincent Boiteau"/>
<img src="thumbs/21.jpg" alt="images/21.jpg" title="Beatriz_Ruiz_04 © studio.es by Vincent Boiteau"/>
<img src="thumbs/22.jpg" alt="images/22.jpg" title="Beatriz_Ruiz_02 © studio.es by Vincent Boiteau"/>
<img src="thumbs/23.jpg" alt="images/23.jpg" title="Beatriz_Ruiz_01 © studio.es by Vincent Boiteau"/>
<img src="thumbs/24.jpg" alt="images/24.jpg" title="Fashion 9 © studio.es by Vincent Boiteau"/>
<img src="thumbs/25.jpg" alt="images/25.jpg" title="_MG_4859 © studio.es by Vincent Boiteau"/>
<img src="thumbs/26.jpg" alt="images/26.jpg" title="_MG_4900 © studio.es by Vincent Boiteau" />
<img src="thumbs/27.jpg" alt="images/27.jpg" title="_MG_4756 © studio.es by Vincent Boiteau" />
<img src="thumbs/28.jpg" alt="images/28.jpg" title="fashion 15 © studio.es by Vincent Boiteau"/>
<img src="thumbs/29.jpg" alt="images/29.jpg" title="Fashion 6 © studio.es by Vincent Boiteau"/>
<img src="thumbs/30.jpg" alt="images/30.jpg" title="fashion 12 © studio.es by Vincent Boiteau"/>
<img src="thumbs/31.jpg" alt="images/31.jpg" title="fashion 14 © studio.es by Vincent Boiteau" />
<img src="thumbs/32.jpg" alt="images/32.jpg" title="fashion 13 © studio.es by Vincent Boiteau" />
<img src="thumbs/33.jpg" alt="images/33.jpg" title="Fashion 11 © studio.es by Vincent Boiteau" />
<img src="thumbs/34.jpg" alt="images/34.jpg" title="Fashion 10 © studio.es by Vincent Boiteau" />
<img src="thumbs/35.jpg" alt="images/35.jpg" title="Fashion 8 © studio.es by Vincent Boiteau"/>
<img src="thumbs/36.jpg" alt="images/36.jpg" title="Fashion 7 © studio.es by Vincent Boiteau" />
<img src="thumbs/1.jpg" alt="images/1.jpg" title="Beatriz_Florido_01 © studio.es"/>
<img src="thumbs/2.jpg" alt="images/2.jpg" title="Nuria_09 © studio.es by Vincent Boiteau"/>
<img src="thumbs/3.jpg" alt="images/3.jpg" title="Nuria_08 © studio.es by Vincent Boiteau"/>
<img src="thumbs/4.jpg" alt="images/4.jpg" title="Nuria_07 © studio.es by Vincent Boiteau"/>
<img src="thumbs/5.jpg" alt="images/5.jpg" title="Nuria_06 © studio.es by Vincent Boiteau"/>
<img src="thumbs/6.jpg" alt="images/6.jpg" title="Nuria_05 © studio.es by Vincent Boiteau"/>
<img src="thumbs/7.jpg" alt="images/7.jpg" title="Nuria_04 © studio.es by Vincent Boiteau"/>
<img src="thumbs/8.jpg" alt="images/8.jpg" title="Nuria_03 © studio.es by Vincent Boiteau"/>
<img src="thumbs/9.jpg" alt="images/9.jpg" title="Nuria_02 © studio.es by Vincent Boiteau"/>
<img src="thumbs/10.jpg" alt="images/10.jpg" title="Nuria_01 © studio.es by Vincent Boiteau"/>
<img src="thumbs/11.jpg" alt="images/11.jpg" title="Janne_Nielsen_07 © studio.es by Vincent Boiteau"/>
<img src="thumbs/12.jpg" alt="images/12.jpg" title="Janne_Nielsen_03 © studio.es by Vincent Boiteau"/>
<img src="thumbs/13.jpg" alt="images/13.jpg" title="Janne_Nielsen_06 © studio.es by Vincent Boiteau"/>
<img src="thumbs/14.jpg" alt="images/14.jpg" title="Janne_Nielsen_05 © studio.es by Vincent Boiteau"/>
<img src="thumbs/15.jpg" alt="images/15.jpg" title="Janne_Nielsen_04 © studio.es by Vincent Boiteau"/>
<img src="thumbs/16.jpg" alt="images/16.jpg" title="Janne_Nielsen_01 © studio.es by Vincent Boiteau"/>
<img src="thumbs/17.jpg" alt="images/17.jpg" title="Beatriz_Ruiz_10 © studio.es by Vincent Boiteau"/>
<img src="thumbs/18.jpg" alt="images/18.jpg" title="Beatriz_Ruiz_08 © studio.es by Vincent Boiteau"/>
<img src="thumbs/19.jpg" alt="images/19.jpg" title="Beatriz_Ruiz_06 © studio.es by Vincent Boiteau"/>
<img src="thumbs/20.jpg" alt="images/20.jpg" title="Beatriz_Ruiz_05 © studio.es by Vincent Boiteau"/>
<img src="thumbs/21.jpg" alt="images/21.jpg" title="Beatriz_Ruiz_04 © studio.es by Vincent Boiteau"/>
<img src="thumbs/22.jpg" alt="images/22.jpg" title="Beatriz_Ruiz_02 © studio.es by Vincent Boiteau"/>
<img src="thumbs/23.jpg" alt="images/23.jpg" title="Beatriz_Ruiz_01 © studio.es by Vincent Boiteau"/>
<img src="thumbs/24.jpg" alt="images/24.jpg" title="Fashion 9 © studio.es by Vincent Boiteau"/>
<img src="thumbs/25.jpg" alt="images/25.jpg" title="_MG_4859 © studio.es by Vincent Boiteau"/>
<img src="thumbs/26.jpg" alt="images/26.jpg" title="_MG_4900 © studio.es by Vincent Boiteau" />
<img src="thumbs/27.jpg" alt="images/27.jpg" title="_MG_4756 © studio.es by Vincent Boiteau" />
<img src="thumbs/28.jpg" alt="images/28.jpg" title="fashion 15 © studio.es by Vincent Boiteau"/>
<img src="thumbs/29.jpg" alt="images/29.jpg" title="Fashion 6 © studio.es by Vincent Boiteau"/>
<img src="thumbs/30.jpg" alt="images/30.jpg" title="fashion 12 © studio.es by Vincent Boiteau"/>
<img src="thumbs/31.jpg" alt="images/31.jpg" title="fashion 14 © studio.es by Vincent Boiteau" />
<img src="thumbs/32.jpg" alt="images/32.jpg" title="fashion 13 © studio.es by Vincent Boiteau" />
<img src="thumbs/33.jpg" alt="images/33.jpg" title="Fashion 11 © studio.es by Vincent Boiteau" />
<img src="thumbs/34.jpg" alt="images/34.jpg" title="Fashion 10 © studio.es by Vincent Boiteau" />
<img src="thumbs/35.jpg" alt="images/35.jpg" title="Fashion 8 © studio.es by Vincent Boiteau"/>
<img src="thumbs/36.jpg" alt="images/36.jpg" title="Fashion 7 © studio.es by Vincent Boiteau" />
<img src="thumbs/1.jpg" alt="images/1.jpg" title="Beatriz_Florido_01 © studio.es"/>
<img src="thumbs/2.jpg" alt="images/2.jpg" title="Nuria_09 © studio.es by Vincent Boiteau"/>
<img src="thumbs/3.jpg" alt="images/3.jpg" title="Nuria_08 © studio.es by Vincent Boiteau"/>
<img src="thumbs/4.jpg" alt="images/4.jpg" title="Nuria_07 © studio.es by Vincent Boiteau"/>
<img src="thumbs/5.jpg" alt="images/5.jpg" title="Nuria_06 © studio.es by Vincent Boiteau"/>
<img src="thumbs/6.jpg" alt="images/6.jpg" title="Nuria_05 © studio.es by Vincent Boiteau"/>
<img src="thumbs/7.jpg" alt="images/7.jpg" title="Nuria_04 © studio.es by Vincent Boiteau"/>
<img src="thumbs/8.jpg" alt="images/8.jpg" title="Nuria_03 © studio.es by Vincent Boiteau"/>
<img src="thumbs/9.jpg" alt="images/9.jpg" title="Nuria_02 © studio.es by Vincent Boiteau"/>
<img src="thumbs/10.jpg" alt="images/10.jpg" title="Nuria_01 © studio.es by Vincent Boiteau"/>
<img src="thumbs/11.jpg" alt="images/11.jpg" title="Janne_Nielsen_07 © studio.es by Vincent Boiteau"/>
<img src="thumbs/12.jpg" alt="images/12.jpg" title="Janne_Nielsen_03 © studio.es by Vincent Boiteau"/>
<img src="thumbs/13.jpg" alt="images/13.jpg" title="Janne_Nielsen_06 © studio.es by Vincent Boiteau"/>
<img src="thumbs/14.jpg" alt="images/14.jpg" title="Janne_Nielsen_05 © studio.es by Vincent Boiteau"/>
<img src="thumbs/15.jpg" alt="images/15.jpg" title="Janne_Nielsen_04 © studio.es by Vincent Boiteau"/>
<img src="thumbs/16.jpg" alt="images/16.jpg" title="Janne_Nielsen_01 © studio.es by Vincent Boiteau"/>
<img src="thumbs/17.jpg" alt="images/17.jpg" title="Beatriz_Ruiz_10 © studio.es by Vincent Boiteau"/>
<img src="thumbs/18.jpg" alt="images/18.jpg" title="Beatriz_Ruiz_08 © studio.es by Vincent Boiteau"/>
<img src="thumbs/19.jpg" alt="images/19.jpg" title="Beatriz_Ruiz_06 © studio.es by Vincent Boiteau"/>
<img src="thumbs/20.jpg" alt="images/20.jpg" title="Beatriz_Ruiz_05 © studio.es by Vincent Boiteau"/>
<img src="thumbs/21.jpg" alt="images/21.jpg" title="Beatriz_Ruiz_04 © studio.es by Vincent Boiteau"/>
<img src="thumbs/22.jpg" alt="images/22.jpg" title="Beatriz_Ruiz_02 © studio.es by Vincent Boiteau"/>
<img src="thumbs/23.jpg" alt="images/23.jpg" title="Beatriz_Ruiz_01 © studio.es by Vincent Boiteau"/>
<img src="thumbs/24.jpg" alt="images/24.jpg" title="Fashion 9 © studio.es by Vincent Boiteau"/>
<img src="thumbs/25.jpg" alt="images/25.jpg" title="_MG_4859 © studio.es by Vincent Boiteau"/>
<img src="thumbs/26.jpg" alt="images/26.jpg" title="_MG_4900 © studio.es by Vincent Boiteau" />
<img src="thumbs/27.jpg" alt="images/27.jpg" title="_MG_4756 © studio.es by Vincent Boiteau" />
<img src="thumbs/28.jpg" alt="images/28.jpg" title="fashion 15 © studio.es by Vincent Boiteau"/>
<img src="thumbs/29.jpg" alt="images/29.jpg" title="Fashion 6 © studio.es by Vincent Boiteau"/>
<img src="thumbs/30.jpg" alt="images/30.jpg" title="fashion 12 © studio.es by Vincent Boiteau"/>
<img src="thumbs/31.jpg" alt="images/31.jpg" title="fashion 14 © studio.es by Vincent Boiteau" />
<img src="thumbs/32.jpg" alt="images/32.jpg" title="fashion 13 © studio.es by Vincent Boiteau" />
<img src="thumbs/33.jpg" alt="images/33.jpg" title="Fashion 11 © studio.es by Vincent Boiteau" />
<img src="thumbs/34.jpg" alt="images/34.jpg" title="Fashion 10 © studio.es by Vincent Boiteau" />
<img src="thumbs/35.jpg" alt="images/35.jpg" title="Fashion 8 © studio.es by Vincent Boiteau"/>
<img src="thumbs/36.jpg" alt="images/36.jpg" title="Fashion 7 © studio.es by Vincent Boiteau" />
<div class="placeholder"></div>
</div>
</div>
<div id="panel">
<div id="wrapper">
<a id="prev"></a>
<a id="next"></a>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
/* this is the index of the last clicked picture */
var current = -1;
/* number of pictures */
var totalpictures = $('#content img').size();
/* speed to animate the panel and the thumbs wrapper */
var speed = 500;
/* show the content */
$('#content').show();
/*
when the user resizes the browser window,
the size of the picture being viewed is recalculated;
*/
$(window).bind('resize', function() {
var $picture = $('#wrapper').find('img');
resize($picture);
});
/*
when hovering a thumb, animate it's opacity
for a cool effect;
when clicking on it, we load the corresponding large image;
the source of the large image is stored as
the "alt" attribute of the thumb image
*/
$('#content > img').hover(function () {
var $this = $(this);
$this.stop().animate({'opacity':'1.0'},200);
},function () {
var $this = $(this);
$this.stop().animate({'opacity':'0.4'},200);
}).bind('click',function(){
var $this = $(this);
/* shows the loading icon */
$('#loading').show();
$('<img/>').load(function(){
$('#loading').hide();
if($('#wrapper').find('img').length) return;
current = $this.index();
var $theImage = $(this);
/*
After it's loaded we hide the loading icon
and resize the image, given the window size;
then we append the image to the wrapper
*/
resize($theImage);
$('#wrapper').append($theImage);
/* make its opacity animate */
$theImage.fadeIn(800);
/* and finally slide up the panel */
$('#panel').animate({'height':'100%'},speed,function(){
/*
if the picture has a description,
it's stored in the title attribute of the thumb;
show it if it's not empty
*/
var title = $this.attr('title');
if(title != '')
$('#description').html(title).show();
else
$('#description').empty().hide();
/*
if our picture is the first one,
don't show the "previous button"
for the slideshow navigation;
if our picture is the last one,
don't show the "next button"
for the slideshow navigation
*/
if(current==0)
$('#prev').hide();
else
$('#prev').fadeIn();
if(current==parseInt(totalpictures-1))
$('#next').hide();
else
$('#next').fadeIn();
/*
we set the z-index and height of the thumbs wrapper
to 0, because we want to slide it up afterwards,
when the user clicks the large image
*/
$('#thumbsWrapper').css({'z-index':'0','height':'0px'});
});
}).attr('src', $this.attr('alt'));
});
/*
when hovering a large image,
we want to slide up the thumbs wrapper again,
and reset the panel (like it was initially);
this includes removing the large image element
*/
$('#wrapper > img').live('click',function(){
$this = $(this);
$('#description').empty().hide();
$('#thumbsWrapper').css('z-index','10')
.stop()
.animate({'height':'100%'},speed,function(){
var $theWrapper = $(this);
$('#panel').css('height','0px');
$theWrapper.css('z-index','0');
/*
remove the large image element
and the navigation buttons
*/
$this.remove();
$('#prev').hide();
$('#next').hide();
});
});
/*
when we are viewing a large image,
if we navigate to the right/left we need to know
which image is the corresponding neighbour.
we know the index of the current picture (current),
so we can easily get to the neighbour:
*/
$('#next').bind('click',function(){
var $this = $(this);
var $nextimage = $('#content img:nth-child('+parseInt(current+2)+')');
navigate($nextimage,'right');
});
$('#prev').bind('click',function(){
var $this = $(this);
var $previmage = $('#content img:nth-child('+parseInt(current)+')');
navigate($previmage,'left');
});
/*
given the next or previous image to show,
and the direction, it loads a new image in the panel.
*/
function navigate($nextimage,dir){
/*
if we are at the end/beginning
then there's no next/previous
*/
if(dir=='left' && current==0)
return;
if(dir=='right' && current==parseInt(totalpictures-1))
return;
$('#loading').show();
$('<img/>').load(function(){
var $theImage = $(this);
$('#loading').hide();
$('#description').empty().fadeOut();
$('#wrapper img').stop().fadeOut(500,function(){
var $this = $(this);
$this.remove();
resize($theImage);
$('#wrapper').append($theImage.show());
$theImage.stop().fadeIn(800);
var title = $nextimage.attr('title');
if(title != ''){
$('#description').html(title).show();
}
else
$('#description').empty().hide();
if(current==0)
$('#prev').hide();
else
$('#prev').show();
if(current==parseInt(totalpictures-1))
$('#next').hide();
else
$('#next').show();
});
/*
increase or decrease the current variable
*/
if(dir=='right')
++current;
else if(dir=='left')
--current;
}).attr('src', $nextimage.attr('alt'));
}
/*
resizes an image given the window size,
considering the margin values
*/
function resize($image){
var windowH = $(window).height()-100;
var windowW = $(window).width()-80;
var theImage = new Image();
theImage.src = $image.attr("src");
var imgwidth = theImage.width;
var imgheight = theImage.height;
if((imgwidth > windowW)||(imgheight > windowH)){
if(imgwidth > imgheight){
var newwidth = windowW;
var ratio = imgwidth / windowW;
var newheight = imgheight / ratio;
theImage.height = newheight;
theImage.width= newwidth;
if(newheight>windowH){
var newnewheight = windowH;
var newratio = newheight/windowH;
var newnewwidth =newwidth/newratio;
theImage.width = newnewwidth;
theImage.height= newnewheight;
}
}
else{
var newheight = windowH;
var ratio = imgheight / windowH;
var newwidth = imgwidth / ratio;
theImage.height = newheight;
theImage.width= newwidth;
if(newwidth>windowW){
var newnewwidth = windowW;
var newratio = newwidth/windowW;
var newnewheight =newheight/newratio;
theImage.height = newnewheight;
theImage.width= newnewwidth;
}
}
}
$image.css({'width':theImage.width+'px','height':theImage.height+'px'});
}
});
</script>
</body>
</html>
CSS代码(style.css):
*{margin:0;padding:0;}
body{background-color:#000;font-family:Verdana;text-transform:uppercase;color:#fff;font-size:10px;overflow:hidden;}
.infobar{background-color:#000;height:28px;line-height:28px;right:20px;position:fixed;bottom:0px;left:20px;z-index:999999999;text-align:center;color:#ddd;-moz-border-radius:10px 10px 0px 0px;-webkit-border-top-left-radius:10px;-webkit-border-top-right-radius:10px;border-top-left-radius:10px;border-top-right-radius:10px;text-shadow:0px 0px 1px #ccc;}
span#description{text-shadow:1px 1px 1px #000;display:none;}
span#loading{display:none;padding-right:30px;background:transparent url(../loading.gif) no-repeat center right;}
#thumbsWrapper{overflow:hidden;position:fixed;height:100%;width:100%;left:0px;right:0px;bottom:0px;}
#content{position:absolute;top:0px;height:100%;width:100%;left:0px;background-color:#111;overflow-y:scroll;display:none;}
#content img{float:left;margin:2px;cursor:pointer;opacity:0.4;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);}
.placeholder{float:left;clear:both;width:100%;height:30px;}
#panel{background-color:#222;width:100%;position:fixed;bottom:0px;left:0px;right:0px;height:0px;text-align:center;}
#panel img{cursor:pointer;position:relative;border:1px solid #000;-moz-box-shadow:0px 0px 10px #111;-webkit-box-shadow:0px 0px 10px #111;box-shadow:0px 0px 10px #111;display:none;}
#wrapper{position:relative;margin:40px auto 0px auto;}
a#next,a#prev{width:40px;height:40px;position:fixed;cursor:pointer;outline:none;display:none;background:#aaa url(../nav.png) no-repeat top left;}
a#next:hover,a#prev:hover{background-color:#fff;}
a#next{right:0px;top:50%;margin-top:-20px;background-position:0px 0px;}
a#prev{left:0px;top:50%;margin-top:-20px;background-position:0px -40px;}
分享到QQ
分享到微博
微信扫一扫
