Since the thumbnail spotlight effect i wrote a tutorial about was and still is amazingly popular i decided to make another cool thumbnail effect. This time with zoom and sliding caption.
How to use it? Just hover over the images and you will see the effect.
Example Thumbnail Effect With Zoom And Sliding Captions, Klik Here,,
CSS::
.thumbnailWrapper { width:600px; margin:0px auto; } /* not important */
.thumbnailWrapper ul {
list-style-type: none; /* remove the default style for list items (the circles) */
margin:0px; /* remove default margin */
padding:0px; /* remove default padding */
}
.thumbnailWrapper ul li {
float:left; /* important: left float */
position:relative; /* so we can use top and left positioning */
overflow:hidden; /* hide the content outside the boundaries (ZOOM) */
}
.thumbnailWrapper ul li a img {
width:200px; /* not important, the pics we use here are too big */
position:relative; /* so we can use top and left positioning */
border:none; /* remove the default blue border */
}
.caption{
position:absolute; /* needed for positioning */
bottom:0px; /* bottom of the list item (container) */
left:0px; /* start from left of the list item (container) */
width:100%; /* stretch to the whole width of container */
display:none; /* hide by default */
/* styling bellow */
background:rgba(0,0,0,0.8);
color:white;
}
.caption .captionInside{
/* just styling */
padding:10px;
margin:0px;
}
.caption p{
text-align:center;
font-size:110%;
}
.clear { clear:both; } /* to clear the float after the last item */
SCRIPT::
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function(){
//set and get some variables
var thumbnail = {
imgIncrease : 100, /* the image increase in pixels (for zoom) */
effectDuration : 400, /* the duration of the effect (zoom and caption) */
/*
get the width and height of the images. Going to use those
for 2 things:
make the list items same size
get the images back to normal after the zoom
*/
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
};
//make the list items same size as the images
$('.thumbnailWrapper ul li').css({
'width' : thumbnail.imgWidth,
'height' : thumbnail.imgHeight
});
//when mouse over the list item...
$('.thumbnailWrapper ul li').hover(function(){
$(this).find('img').stop().animate({
/* increase the image width for the zoom effect*/
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
/* we need to change the left and top position in order to
have the zoom effect, so we are moving them to a negative
position of the half of the imgIncrease */
left: thumbnail.imgIncrease/2*(-1),
top: thumbnail.imgIncrease/2*(-1)
},{
"duration": thumbnail.effectDuration,
"queue": false
});
//show the caption using slideDown event
$(this).find('.caption:not(:animated)').slideDown(thumbnail.effectDuration);
//when mouse leave...
}, function(){
//find the image and animate it...
$(this).find('img').animate({
/* get it back to original size (zoom out) */
width: thumbnail.imgWidth,
/* get left and top positions back to normal */
left: 0,
top: 0
}, thumbnail.effectDuration);
//hide the caption using slideUp event
$(this).find('.caption').slideUp(thumbnail.effectDuration);
});
});
</script>
HTML::
<!-- start thumbnailWrapper -->
<div class='thumbnailWrapper'>
<ul>
<li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/1.jpg' /></a>
<div class='caption'>
<p class='captionInside'>CofeeNerd</p>
</div></li>
<li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/2.jpg' /></a>
<div class='caption'>
<p class='captionInside'>musiKings</p>
</div></li>
<li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/3.png' /></a>
<div class='caption'>
<p class='captionInside'>The Caribbean Energy Conference 2010</p>
</div></li>
<li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/4.jpg' /></a>
<div class='caption'>
<p class='captionInside'>Coffee</p>
</div></li>
<li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/5.jpg' /></a>
<div class='caption'>
<p class='captionInside'>Quantum</p>
</div></li>
<li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/6.png' /></a>
<div class='caption'>
<p class='captionInside'>Infinite Love</p>
</div></li>
<li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/7.jpg' /></a>
<div class='caption'>
<p class='captionInside'>Fathom</p>
</div></li>
<li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/9.PNG' /></a>
<div class='caption'>
<p class='captionInside'>Mixed Pome</p>
</div></li>
<li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/10.jpg' /></a>
<div class='caption'>
<p class='captionInside'>Golf Lessons Online</p>
</div></li>
<div class='clear'></div><!-- clear the float -->
</ul>
</div><!-- end spolightWrapper -->
Semoga bermanfaat yaa,, ^^
Paradigm Slider jQuery Touchable Plugin – The premium way of using a slider in your website.
A combination of Parallax Effect, state-of-the-art Slider and Text Animations defines this slider.
Customize this slider with just a little HTML and CSS to your very needs. Give each slider a parallax caption to transport your message.
Touch swipe for iOS and Android mobile devices is of course included. So it works on every modern browser (including IE7 /8) and on mobile devices.
Excample PARADIGM Slider Klik here,,
SCRIPT::
<!-- get jQuery from the google apis -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<!-- jQuery Paradigm Slider -->
<script type="text/javascript" src="http://www.themepunch.com/codecanyon/paradigm/paradigm-plugin/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://www.themepunch.com/codecanyon/paradigm/paradigm-plugin/js/jquery.cssAnimate.mini.js"></script>
<script type="text/javascript" src="http://www.themepunch.com/codecanyon/paradigm/paradigm-plugin/js/jquery.waitforimages.js"></script>
<script type="text/javascript" src="http://www.themepunch.com/codecanyon/paradigm/paradigm-plugin/js/jquery.touchwipe.min.js"></script>
<script type="text/javascript" src="http://www.themepunch.com/codecanyon/paradigm/paradigm-plugin/js/jquery.themepunch.paradigm.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.noConflict();
jQuery('#slider-light').paradigm(
{
width:900,
height:300,
thumbWidth:90,
thumbHeight:50,
thumbAmount:6,
thumbSpaces:4,
thumbPadding:4,
thumbStyle:"thumb",
thumbVideoIcon:"on",
bulletXOffset:0,
bulletYOffset:0,
shadow:'true',
parallaxX:500,
parallaxY:10,
captionParallaxX:-40,
captionParallaxY:2,
touchenabled:'on',
timer:5
});
jQuery('#slider-dark').paradigm(
{
width:700,
height:300,
thumbWidth:120,
thumbHeight:80,
thumbAmount:5,
thumbSpaces:0,
thumbPadding:4,
thumbStyle:"bullet",
thumbVideoIcon:"on",
bulletXOffset:0,
bulletYOffset:0,
shadow:'true',
parallaxX:0,
parallaxY:0,
captionParallaxX:0,
captionParallaxY:0,
touchenabled:'on',
timer:4
});
});
</script>
CSS Light Style::
<style type="text/css">
#slider-light{
margin-left:auto;
margin-right:auto;
position:relative;
width:918px;
height:300px;
}
#slider-light ul >li{
display:none;
}
.caption_black-light{
font-family: 'PT Sans Narrow', sans-serif;
font-size:25px;
color:#fff;
background-color:#000;
padding:5px;
position:absolute;
-moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
padding-left: 10px;
padding-right: 10px;
}
.caption_blue-light{
font-family: 'PT Sans Narrow', sans-serif;
font-size:25px;
color:#fff;
background-color:#00b4ff;
padding:5px;
position:absolute;
-moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
padding-left: 10px;
padding-right: 10px;
}
.caption_green-light{
font-family: 'PT Sans Narrow', sans-serif;
font-size:25px;
color:#fff;
background-color:#445626;
padding:5px;
position:absolute;
-moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
padding-left: 10px;
padding-right: 10px;
}
.caption_orange-light{
font-family: 'PT Sans Narrow', sans-serif;
font-size:25px;
color:#fff;
background-color:#c54a00;
padding:5px;
position:absolute;
-moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
padding-left: 10px;
padding-right: 10px;
}
.caption_red-light{
font-family: 'PT Sans Narrow', sans-serif;
font-size:25px;
color:#fff;
background-color:#c4302b;
padding:5px;
position:absolute;
-moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
padding-left: 10px;
padding-right: 10px;
}
.caption_white-light{
font-family: 'PT Sans Narrow', sans-serif;
font-size:25px;
color:#000;
background-color:#fff;
padding:5px;
position:absolute;
-moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
padding-left: 10px;
padding-right: 10px;
}
.caption_white-light a:link, .caption_white-light a:visited {
text-decoration: none;
color: #000;
}
.caption_white-light a:hover {
text-decoration: none;
cursor: pointer;
color: #555;
}
.smallcap-light{
font-size:18px;
}
.largecap-light{
font-size:32px;
}
.imagecap-light{position:absolute;}
.nobg-light{
background: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
text-shadow: #000 0px -1px 1px;
}
</style>
<link rel="stylesheet" type="text/css" href="http://www.themepunch.com/codecanyon/paradigm/paradigm-plugin/css/settings.css" media="screen" />
CSS Dark Style::
<style type="text/css">
#slider-dark{
margin-left:auto;
margin-right:auto;
position:relative;
width:700px;
height:300px;
}
#slider-dark ul >li{
display:none;
}
.caption_black-dark{
font-family: 'PT Sans Narrow', sans-serif;
font-size:25px;
color:#fff;
background-color:#000;
padding:5px;
position:absolute;
-moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
padding-left: 10px;
padding-right: 10px;
}
.caption_white-dark{
font-family: 'PT Sans Narrow', sans-serif;
font-size:25px;
color:#000;
background-color:#fff;
padding:5px;
position:absolute;
-moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
padding-left: 10px;
padding-right: 10px;
}
.caption_grey-dark{
font-family: 'PT Sans Narrow', sans-serif;
font-size:25px;
color:#fff;
background-color:#333;
padding:5px;
position:absolute;
-moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
padding-left: 10px;
padding-right: 10px;
}
.caption_brown-dark{
font-family: 'PT Sans Narrow', sans-serif;
font-size:25px;
color:#000;
background-color:#601A00;
padding:5px;
position:absolute;
-moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
padding-left: 10px;
padding-right: 10px;
}
.caption_pink-dark{
font-family: 'PT Sans Narrow', sans-serif;
font-size:25px;
color:#fff;
background-color:#00CCD3;
padding:5px;
position:absolute;
-moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
padding-left: 10px;
padding-right: 10px;
}
.smallcap-dark{
font-size:18px;
}
.largecap-dark{
font-size:32px;
}
.nobg-dark{
background: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
text-shadow: #000 0px -1px 1px;
}
</style>
<link rel="stylesheet" type="text/css" href="http://www.themepunch.com/codecanyon/paradigm/paradigm-plugin/css/settings.css" media="screen" />
HTML Light Style::
<div id="slider-light" class="light" style="margin:30px auto;">
<ul>
<!-- THE 1. SLIDE -->
<li data-transition="fade"><img src="http://www.themepunch.com/codecanyon/paradigm/images/slides/slide1.jpg" data-thumb="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb1.jpg" data-thumb_bw="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb1_bw.jpg"/>
<div class="creative_layer">
<div class="caption_blue-light fadeup" style="top:170px;left:50px;">Welcome to PARADIGM</div>
<div class="caption_black-light smallcap-light faderight" style="top:213px;left:90px">The highly customizable slider solution</div>
</div></li>
<!-- THE 2. SLIDE -->
<li data-transition="slide"><img src="http://www.themepunch.com/codecanyon/paradigm/images/slides/vimeo.jpg" data-thumb="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb_vimeo.jpg" data-thumb_bw="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb_vimeo_bw.jpg"/>
<div class="video_pradigm">
<div class="video_paradigm_wrap">
<iframe class="video_clip" src="http://player.vimeo.com/video/24456787?title=0&byline=0&portrait=0" width="534" height="300" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
<h2>Vimeo Video Support</h2>
<p>
Themepunch creates beautiful and elegant termplates, themes and components that suit your clients needs.
</p>
<p>
<strong>Lorem ipsum</strong> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy <strong>eirmod tempor</strong>.
</p>
<a class="buttonlight" href="#">Visit Website</a>
<div id="close"></div>
</div>
</div>
<div class="creative_layer">
<div class="caption_blue-light fadeleft" style="top:120px;left:590px;">Vimeo Video</div>
<div class="caption_white-light faderight" style="top:120px;left:722px;">Support</div>
<div class="caption_black-light smallcap-light fadeup" style="top:163px;left:590px;">Click the play button</div>
</div></li>
<!-- THE 3. SLIDE -->
<li data-transition="slide"><img src="http://www.themepunch.com/codecanyon/paradigm/images/slides/slide2.jpg" data-thumb="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb2.jpg" data-thumb_bw="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb2_bw.jpg"/>
<div class="creative_layer">
<div class="caption_green-light fadedown" style="top:80px;left:550px;">Some of Paradigm's Options:</div>
<div class="caption_black-light smallcap-light fadeleft" style="top:123px;left:550px">Image and thumbs fully resizable</div>
<div class="caption_black-light smallcap-light fadeleft" style="top:157px;left:550px">Optional parallax effect</div>
<div class="caption_black-light smallcap-light fadeleft" style="top:191px;left:550px">iPhone & Android touch enabled</div>
</div></li>
<!-- THE 4. SLIDE -->
<li data-transition="fade"><img src="http://www.themepunch.com/codecanyon/paradigm/images/slides/slide3.jpg" data-thumb="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb3.jpg" data-thumb_bw="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb3_bw.jpg"/>
<div class="creative_layer">
<div class="caption_orange-light fadeup" style="top:210px;left:200px;">Captions can be positioned freely</div>
<div class="caption_white-light fadedown" style="top:210px;left:513px;"><a href="#">Example URL-link</a></div>
</div></li>
<!-- THE 5. SLIDE -->
<li data-transition="fade"><img src="http://www.themepunch.com/codecanyon/paradigm/images/slides/youtube.jpg" data-thumb="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb_youtube.jpg" data-thumb_bw="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb_youtube_bw.jpg"/>
<div class="video_pradigm">
<div class="video_paradigm_wrap">
<iframe class="video_clip" src="http://www.youtube.com/embed/kjX-8kQmakk?hd=1&wmode=opaque&autohide=1&showinfo=0" height="300" width="534" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
<h2>Youtube Video Support</h2>
<p>
Themepunch creates beautiful and elegant termplates, themes and components that suit your clients needs.
</p>
<p>
<strong>Lorem ipsum</strong> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy <strong>eirmod tempor</strong>.
</p>
<a class="buttonlight" href="#">More Info</a>
<div id="close"></div>
</div>
</div>
<div class="creative_layer">
<div class="caption_red-light fadeleft" style="top:120px;left:580px;"><a href="#">Youtube Video</a></div>
<div class="caption_white-light faderight" style="top:120px;left:728px;">Support</div>
</div></li>
<!-- THE 6. SLIDE -->
<li data-transition="slide"><img src="http://www.themepunch.com/codecanyon/paradigm/images/slides/slide4.jpg" data-thumb="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb4.jpg" data-thumb_bw="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb4_bw.jpg"/>
<div class="creative_layer">
<div class="caption_black-light nobg-light largecap-light fadeleft" style="top:60px;left:530px;">Text with no background</div>
</div></li>
<!-- THE 7. SLIDE -->
<li data-transition="fade"><img src="http://www.themepunch.com/codecanyon/paradigm/images/slides/slide5.jpg" data-thumb="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb5.jpg" data-thumb_bw="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb5_bw.jpg"/>
<div class="creative_layer">
<div class="caption_blue-light fadeleft" style="top:220px;left:550px;">We hope you enjoy this slider</div>
</div></li>
<!-- THE 8. SLIDE -->
<li data-transition="slide"><img src="http://www.themepunch.com/codecanyon/paradigm/images/slides/slide6.jpg" data-thumb="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb6.jpg" data-thumb_bw="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb6_bw.jpg"/>
<div class="creative_layer">
<div class="caption_green-light faderight" style="top:220px;left:550px;">Make sure to follow us on envato</div>
</div></li>
</ul>
</div> <!-- THE END OF THE BANNER EXMAPLE LIGHT -->
HTML Dark Style::
<div id="slider-dark" class="dark" style="margin:30px auto;">
<ul>
<!-- THE 1. SLIDE -->
<li data-transition="slide"><img src="http://www.themepunch.com/codecanyon/paradigm/images/slides/slide1_v2.jpg" data-thumb="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb1_v2.jpg" data-thumb_bw="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb1_v2_blur.jpg"/>
<div class="creative_layer">
<div class="caption_black-dark largecap-dark fadeleft" style="top:170px;left:70px">PARADIGM</div>
<div class="caption_black-dark smallcap-dark faderight" style="top:220px;left:100px">by Themepunch</div>
</div></li>
<!-- THE 2. SLIDE -->
<li data-transition="fade"><img src="http://www.themepunch.com/codecanyon/paradigm/images/slides/slide2_v2.jpg" data-thumb="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb2_v2.jpg" data-thumb_bw="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb2_v2_blur.jpg"/>
<div class="creative_layer">
<div class="caption_black-dark smallcap-dark nobg-dark faderight" style="top:250px;left:400px">Example setups included in the download</div>
</div></li>
<!-- THE 3. SLIDE -->
<li data-transition="slide"><img src="http://www.themepunch.com/codecanyon/paradigm/images/slides/slide3_v2.jpg" data-thumb="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb3_v2.jpg" data-thumb_bw="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb3_v2_blur.jpg"/>
<div class="creative_layer">
<div class="imagecap-light faderight" style="top:150px;left:50px"><img src="http://www.themepunch.com/codecanyon/paradigm/images/premiumbadge.png" width="170" height="126" alt=""/></div>
<div class="caption_grey-dark faderight" style="top:120px;left:30px">Caption image support</div>
</div></li>
<!-- THE 4. SLIDE -->
<li data-transition="slide"><img src="http://www.themepunch.com/codecanyon/paradigm/images/slides/vimeo.jpg" data-thumb="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb_vimeo.jpg" data-thumb_bw="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb_vimeo_bw.jpg"/>
<div class="video_pradigm">
<div class="video_paradigm_wrap">
<iframe class="video_clip" src="http://player.vimeo.com/video/24456787?title=0&byline=0&portrait=0" width="434" height="300" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
<h2>Vimeo Video Support</h2>
<p>
Themepunch creates beautiful and elegant termplates, themes and components that suit your clients needs.
</p>
<p>
<strong>Lorem ipsum</strong> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy <strong>eirmod tempor</strong>.
</p>
<a class="buttonlight" href="#">Visit Website</a>
<div id="close"></div>
</div>
</div>
<div class="creative_layer">
<div class="caption_pink-dark fadeleft" style="top:120px;left:478px;">Vimeo Video</div>
<div class="caption_brown-dark faderight" style="top:120px;left:610px;">Support</div>
<div class="caption_black-dark smallcap-dark fadeup" style="top:163px;left:552px;">Click the play button</div>
</div></li>
<!-- THE 5. SLIDE -->
<li data-transition="slide"><img src="http://www.themepunch.com/codecanyon/paradigm/images/slides/slide4_v2.jpg" data-thumb="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb4_v2.jpg" data-thumb_bw="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb4_v2_blur.jpg"/>
<div class="creative_layer">
</div></li>
<!-- THE 6. SLIDE -->
<li data-transition="slide"><img src="http://www.themepunch.com/codecanyon/paradigm/images/slides/slide5_v2.jpg" data-thumb="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb5_v2.jpg" data-thumb_bw="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb5_v2_blur.jpg"/>
<div class="creative_layer">
<div class="caption_white-dark fadeup" style="top:230px;left:250px;">Follow us on uttakracker15</div>
</div></li>
</ul>
</div> <!-- THE END OF THE BANNER EXMAPLE DARK -->
In this tutorial we are going to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse. When a thumbnail is clicked, it moves to the center of the page and the full screen image is loaded in the background. Now the user can move up and down and the image will get scrolled automatically, giving him the opportunity to see all of the image.
We will use some CSS3 Webkit properties to enhance the look and jQuery for the functionality.
That’s why the demo is best viewed in Webkit browsers like Google Chrome or Apple Safari.
We will be using the awesome jQuery thumbnail scroller by Malihu. Big thanks to him for this great and smooth script!
Again, we will be showing some amazing photography by Mark Sebastian. Please visit his Flickr page or his homepage for more information on his work. The images that we will be using are from “The IT Factor” photo set on Flickr.
So, let’s begin!
Example Image Gallery Full Page Klik here,,,
CSS::
<style>
*{
margin:0;
padding:0;
}
body {
background:#212121;
overflow:hidden;
font-family:Arial, Helvetica, sans-serif;
text-transform:uppercase;
color:#fff;
font-size:10px;
}
#outer_container{
position:fixed;
bottom:-160px; /*-160px to hide*/
margin:0px 0px 30px 0px;
height:130px;
padding:0;
-webkit-box-reflect:
below 5px -webkit-gradient(
linear,
left top,
left bottom,
from(transparent),
color-stop(0.6, transparent),
to(rgb(18, 18, 18))
);
}
#thumbScroller{
position:relative;
overflow:hidden;
}
#thumbScroller .container{
position:relative;
left:0;
}
#thumbScroller .content{
float:left;
}
#thumbScroller .content div{
margin:2px;
height:100%;
}
#thumbScroller img,
img.clone{
border:5px solid #fff;
height:120px;
}
#thumbScroller a{
padding:2px;
outline:none;
}
.fp_overlay{
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-TF_hDOQGE7Atw0Lf-imSTxdLiInhyn_uKIKnsdpUtTIhQwtlHER7fUTG5QN15dhAMKuGNmZyf_wy9ezC9wXQx2J5xhSh5UsEzI_mB_JM-UaGONkx7bzYe2eyg-DA4NquqzZz6y6b36A/s1600/overlay.png);
}
.fp_loading{
display:none;
position:fixed;
top:50%;
left:50%;
margin:-35px 0px 0px -35px;
background:#000 url(http://tympanus.net/Tutorials/FullPageImageGallery/images/icons/loader.gif) no-repeat center center;
width:70px;
height:70px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
z-index:999;
opacity:0.7;
}
.fp_next,
.fp_prev{
width:50px;
height:50px;
position:fixed;
top:50%;
margin-top:-15px;
cursor:pointer;
opacity:0.5;
}
.fp_next:hover,
.fp_prev:hover{
opacity:0.9;
}
.fp_next{
background:#000 url(http://tympanus.net/Tutorials/FullPageImageGallery/images/icons/next.png) no-repeat center center;
right:-50px;
}
.fp_prev{
background:#000 url(http://tympanus.net/Tutorials/FullPageImageGallery/images/icons/prev.png) no-repeat center center;
left:-50px;
}
.fp_thumbtoggle{
height:50px;
background:#000;
width:200px;
text-align:center;
letter-spacing:1px;
text-shadow:1px 1px 1px #000;
position:fixed;
left:50%;
margin-left:-100px;
bottom:-50px;
line-height:50px;
cursor:pointer;
opacity:0.8;
}
.fp_thumbtoggle:hover{
opacity:1.0;
}
img.fp_preview{
position:absolute;
left:0px;
top:0px;
width:100%;
}
</style>
SCRIPT::
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://tympanus.net/Tutorials/FullPageImageGallery/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(window).load(function() {
sliderLeft=$('#thumbScroller .container').position().left;
padding=$('#outer_container').css('paddingRight').replace("px", "");
sliderWidth=$(window).width()-padding;
$('#thumbScroller').css('width',sliderWidth);
var totalContent=0;
$('#thumbScroller .content').each(function () {
totalContent+=$(this).innerWidth();
$('#thumbScroller .container').css('width',totalContent);
});
$('#thumbScroller').mousemove(function(e){
if($('#thumbScroller .container').width()>sliderWidth){
var mouseCoords=(e.pageX - this.offsetLeft);
var mousePercentX=mouseCoords/sliderWidth;
var destX=-(((totalContent-(sliderWidth))-sliderWidth)*(mousePercentX));
var thePosA=mouseCoords-destX;
var thePosB=destX-mouseCoords;
var animSpeed=600; //ease amount
var easeType='easeOutCirc';
if(mouseCoords==destX){
$('#thumbScroller .container').stop();
}
else if(mouseCoords>destX){
//$('#thumbScroller .container').css('left',-thePosA); //without easing
$('#thumbScroller .container').stop().animate({left: -thePosA}, animSpeed,easeType); //with easing
}
else if(mouseCoords<destX){
//$('#thumbScroller .container').css('left',thePosB); //without easing
$('#thumbScroller .container').stop().animate({left: thePosB}, animSpeed,easeType); //with easing
}
}
});
$('#thumbScroller .thumb').each(function () {
$(this).fadeTo(fadeSpeed, 0.6);
});
var fadeSpeed=200;
$('#thumbScroller .thumb').hover(
function(){ //mouse over
$(this).fadeTo(fadeSpeed, 1);
},
function(){ //mouse out
$(this).fadeTo(fadeSpeed, 0.6);
}
);
});
$(window).resize(function() {
//$('#thumbScroller .container').css('left',sliderLeft); //without easing
$('#thumbScroller .container').stop().animate({left: sliderLeft}, 400,'easeOutCirc'); //with easing
$('#thumbScroller').css('width',$(window).width()-padding);
sliderWidth=$(window).width()-padding;
});
</script>
<!-- The JavaScript -->
<script type="text/javascript">
$(function() {
//current thumb's index being viewed
var current = -1;
//cache some elements
var $btn_thumbs = $('#fp_thumbtoggle');
var $loader = $('#fp_loading');
var $btn_next = $('#fp_next');
var $btn_prev = $('#fp_prev');
var $thumbScroller = $('#thumbScroller');
//total number of thumbs
var nmb_thumbs = $thumbScroller.find('.content').length;
//preload thumbs
var cnt_thumbs = 0;
for(var i=0;i<nmb_thumbs;++i){
var $thumb = $thumbScroller.find('.content:nth-child('+parseInt(i+1)+')');
$('<img/>').load(function(){
++cnt_thumbs;
if(cnt_thumbs == nmb_thumbs)
//display the thumbs on the bottom of the page
showThumbs(2000);
}).attr('src',$thumb.find('img').attr('src'));
}
//make the document scrollable
//when the the mouse is moved up/down
//the user will be able to see the full image
makeScrollable();
//clicking on a thumb...
$thumbScroller.find('.content').bind('click',function(e){
var $content= $(this);
var $elem = $content.find('img');
//keep track of the current clicked thumb
//it will be used for the navigation arrows
current = $content.index()+1;
//get the positions of the clicked thumb
var pos_left = $elem.offset().left;
var pos_top = $elem.offset().top;
//clone the thumb and place
//the clone on the top of it
var $clone = $elem.clone()
.addClass('clone')
.css({
'position':'fixed',
'left': pos_left + 'px',
'top': pos_top + 'px'
}).insertAfter($('BODY'));
var windowW = $(window).width();
var windowH = $(window).height();
//animate the clone to the center of the page
$clone.stop()
.animate({
'left': windowW/2 + 'px',
'top': windowH/2 + 'px',
'margin-left' :-$clone.width()/2 -5 + 'px',
'margin-top': -$clone.height()/2 -5 + 'px'
},500,
function(){
var $theClone = $(this);
var ratio = $clone.width()/120;
var final_w = 400*ratio;
$loader.show();
//expand the clone when large image is loaded
$('<img class="fp_preview"/>').load(function(){
var $newimg = $(this);
var $currImage = $('#fp_gallery').children('img:first');
$newimg.insertBefore($currImage);
$loader.hide();
//expand clone
$theClone.animate({
'opacity' : 0,
'top' : windowH/2 + 'px',
'left' : windowW/2 + 'px',
'margin-top' : '-200px',
'margin-left' : -final_w/2 + 'px',
'width' : final_w + 'px',
'height' : '400px'
},1000,function(){$(this).remove();});
//now we have two large images on the page
//fadeOut the old one so that the new one gets shown
$currImage.fadeOut(2000,function(){
$(this).remove();
});
//show the navigation arrows
showNav();
}).attr('src',$elem.attr('alt'));
});
//hide the thumbs container
hideThumbs();
e.preventDefault();
});
//clicking on the "show thumbs"
//displays the thumbs container and hides
//the navigation arrows
$btn_thumbs.bind('click',function(){
showThumbs(500);
hideNav();
});
function hideThumbs(){
$('#outer_container').stop().animate({'bottom':'-160px'},500);
showThumbsBtn();
}
function showThumbs(speed){
$('#outer_container').stop().animate({'bottom':'0px'},speed);
hideThumbsBtn();
}
function hideThumbsBtn(){
$btn_thumbs.stop().animate({'bottom':'-50px'},500);
}
function showThumbsBtn(){
$btn_thumbs.stop().animate({'bottom':'0px'},500);
}
function hideNav(){
$btn_next.stop().animate({'right':'-50px'},500);
$btn_prev.stop().animate({'left':'-50px'},500);
}
function showNav(){
$btn_next.stop().animate({'right':'0px'},500);
$btn_prev.stop().animate({'left':'0px'},500);
}
//events for navigating through the set of images
$btn_next.bind('click',showNext);
$btn_prev.bind('click',showPrev);
//the aim is to load the new image,
//place it before the old one and fadeOut the old one
//we use the current variable to keep track which
//image comes next / before
function showNext(){
++current;
var $e_next = $thumbScroller.find('.content:nth-child('+current+')');
if($e_next.length == 0){
current = 1;
$e_next = $thumbScroller.find('.content:nth-child('+current+')');
}
$loader.show();
$('<img class="fp_preview"/>').load(function(){
var $newimg = $(this);
var $currImage = $('#fp_gallery').children('img:first');
$newimg.insertBefore($currImage);
$loader.hide();
$currImage.fadeOut(2000,function(){$(this).remove();});
}).attr('src',$e_next.find('img').attr('alt'));
}
function showPrev(){
--current;
var $e_next = $thumbScroller.find('.content:nth-child('+current+')');
if($e_next.length == 0){
current = nmb_thumbs;
$e_next = $thumbScroller.find('.content:nth-child('+current+')');
}
$loader.show();
$('<img class="fp_preview"/>').load(function(){
var $newimg = $(this);
var $currImage = $('#fp_gallery').children('img:first');
$newimg.insertBefore($currImage);
$loader.hide();
$currImage.fadeOut(2000,function(){$(this).remove();});
}).attr('src',$e_next.find('img').attr('alt'));
}
function makeScrollable(){
$(document).bind('mousemove',function(e){
var top = (e.pageY - $(document).scrollTop()/2) ;
$(document).scrollTop(top);
});
}
});
</script>
HTML::
<div id="fp_gallery" class="fp_gallery">
<img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/1.jpg" alt="" class="fp_preview" style="display:none;"/>
<div class="fp_overlay"></div>
<div id="fp_loading" class="fp_loading"></div>
<div id="fp_next" class="fp_next"></div>
<div id="fp_prev" class="fp_prev"></div>
<div id="outer_container">
<div id="thumbScroller">
<div class="container">
<div class="content">
<div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/1.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/1.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/2.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/2.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/3.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/3.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/4.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/4.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/5.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/5.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/6.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/6.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/7.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/7.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/8.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/8.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/9.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/9.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/10.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/10.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/11.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/11.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/12.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/12.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/13.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/13.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/14.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/14.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/15.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/15.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/16.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/16.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/17.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/17.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/18.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/18.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/19.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/19.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/20.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/20.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/21.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/21.jpg" class="thumb" /></a></div>
</div>
</div>
</div>
</div>
<div id="fp_thumbtoggle" class="fp_thumbtoggle">View Thumbs</div>
</div>
<div>
</div>
In this little experiment we created an interactive photo desk that provides some “realistic” interaction possibilities for the user. The idea is to have some photos on a surface that can be dragged and dropped, stacked and deleted, each action resembling the real world act.
For example, if we drag a picture, it get’s “picked up” first, making it appear a little bit bigger, since it would be closer to us. Dropping it results in the picture being “thrown back” to the table, in a random rotation. Viewing all photos mirrors the action of collecting all images into a pile and viewing the first one in a none rotated way. Clicking to see the next one then, makes the previous one being thrown back to the surface. Deleting an image will make it appear as a crumpled paper ball.
When using the shuffle function, the photos get rotated and spread over the desk randomly.
You can download the source code of this and experiment with it, there are many more possibilities to discover and integrate.
We are using two important jQuery plugins: 2D Transform for animating rotations and Shadow Animation for animating the box shadow.
The images are taken from the amazing photostream of tibchris on Flickr.
The rotation did not work well with IE (although in principle it should) so we don’t rotate when IE is used.
We hope you enjoy this little experiment!!
CSS::
#gallerybox {width:700px;height:500px;margin:0 auto;position:relative;border:1px solid #fff;box-shadow:0px 0px 5px #eee;-moz-box-shadow:0px 0px 5px #eee;-webkit-box-shadow:0px 0px 5px #eee;}
a.pd_next_photo,
a.pd_loading{z-index:999999;cursor:pointer;border:1px solid #aaa;width:50px;height:50px;position:absolute;top:50%;left:50%;opacity:0.8;margin:-25px 0px 0px -25px;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;}
a.pd_loading{display:none;background:#f6f6f6 url(http://tympanus.net/Development/PhotoDesk/images/loading.gif) no-repeat 50% 50%;}
a.pd_next_photo{background:#B8B8B8 url(http://tympanus.net/Development/PhotoDesk/images/next.png) no-repeat 50% 50%;}
a.pd_next_photo:hover,
a.pd_loading:hover{opacity:1.0;}
.pd_options_bar a.viewall,
.pd_options_bar a.shuffle,
.pd_options_bar a.backdesk
{outline:none;padding:0px 15px 0px 50px;line-height:47px;text-decoration:none;font-size:24px;color:#333;text-shadow:1px 1px 1px #f0f0f0;height:50px;float:right;margin:5px 10px 0px 0px;-moz-box-shadow:1px 1px 2px #666;-webkit-box-shadow:1px 1px 2px #666;box-shadow:1px 1px 2px #666;opacity:0.8;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;}
.pd_options_bar a.viewall{background:#f6f6f6 url(http://tympanus.net/Development/PhotoDesk/images/viewall.png) no-repeat 10px 50%;}
.pd_options_bar a.shuffle{background:#f6f6f6 url(http://tympanus.net/Development/PhotoDesk/images/shuffle.png) no-repeat 10px 50%;}
.pd_options_bar a.backdesk{background:#f6f6f6 url(http://tympanus.net/Development/PhotoDesk/images/backdesk.png) no-repeat 10px 50%;}
.pd_options_bar a.viewall:hover,
.pd_options_bar a.shuffle:hover,
.pd_options_bar a.backdesk:hover
{opacity:1.0;text-shadow:1px 1px 1px #fff;-moz-box-shadow:1px 1px 2px #fff;-webkit-box-shadow:1px 1px 2px #fff;box-shadow:1px 1px 2px #fff;}
.pd_container{position:absolute;top:30px;bottom:30px;right:30px;left:30px;}
.pd_photo{position:absolute;z-index:10;border:7px solid #f6f6f6;border-bottom:28px solid #f6f6f6;width:180px;height:180px;top:0px;left:0px;display:none;-moz-box-shadow:1px 1px 5px #555;-webkit-box-shadow:1px 1px 5px #555;box-shadow:1px 1px 5px #555;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
.pd_photo img, #gallerybox img{width:180px;height:180px;}
.pd_photo span.delete{position:absolute;width:16px;height:16px;right:-16px;top:2px;cursor:pointer;background:#fff url(http://tympanus.net/Development/PhotoDesk/images/close.png) no-repeat center center;-moz-border-radius:0px 8px 8px 0px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:8px;border-top-right-radius:8px;border-bottom-right-radius:8px;-moz-box-shadow:1px 1px 5px #555;-webkit-box-shadow:1px 1px 5px #555;box-shadow:1px 1px 5px #555;}
.pd_paperball{background:transparent url(http://tympanus.net/Development/PhotoDesk/images/paperball.png) no-repeat center center;
position:absolute;}
SCRIPT::
<!-- The JavaScript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script src="http://tympanus.net/Development/PhotoDesk/jquery.transform-0.6.2.min.js"></script>
<script src="http://tympanus.net/Development/PhotoDesk/jquery.animate-shadow-min.js"></script>
<script type="text/javascript">
$(function(){var idx,idxLarge=-1;var mouseup=false;var photoW=184;var photoH=205;var $container=$('#pd_container');var $options=$('#pd_options_bar');var photosSize=$container.find('.pd_photo').length;var navPage=0;var ie=false;if($.browser.msie){ie=true}start();function start(){$('#pd_loading').show();var tableW=$container.width();var tableH=$container.height();var horizontalMax=tableW-photoW;var verticalMax=tableH-photoH;$('<img />').attr('src','images/paperball.png');var cntPhotos=0;$container.find('.pd_photo').each(function(i){var $photo=$(this);$('<img />').load(function(){++cntPhotos;var $image=$(this);var r=Math.floor(Math.random()*201)-100;var maxzidx=parseInt(findHighestZIndex())+1;var param={'top':Math.floor(Math.random()*verticalMax)+'px','left':Math.floor(Math.random()*horizontalMax)+'px','z-index':maxzidx};$photo.css(param);if(!ie)$photo.transform({'rotate':r+'deg'});$photo.show();if(cntPhotos==photosSize){bindEvents();$('#pd_loading').hide()}}).attr('src',$photo.find('img').attr('src'))})}function mouseDown($photo){mouseup=true;idx=$photo.index()+1;var maxzidx=parseInt(findHighestZIndex())+1;$photo.css('z-index',maxzidx);if(ie)var param={'width':'+=40px','height':'+=40px'};else var param={'width':'+=40px','height':'+=40px','rotate':'0deg','shadow':'5px 5px 15px #222'};$photo.stop(true,true).animate(param,100).find('img').stop(true,true).animate({'width':'+=40px','height':'+=40px'},100)}$(document).bind('mouseup',function(e){if(mouseup){mouseup=false;var $photo=$container.find('.pd_photo:nth-child('+idx+')');var r=Math.floor(Math.random()*101)-50;var $photoT=parseFloat($photo.css('top'),10);var $photoL=parseFloat($photo.css('left'),10);var newTop=$photoT+r;var newLeft=$photoL+r;if(ie)var param={'width':'-=40px','height':'-=40px','top':newTop+'px','left':newLeft+'px'};else var param={'width':'-=40px','height':'-=40px','top':newTop+'px','left':newLeft+'px','rotate':r+'deg','shadow':'0 0 5px #000'};$photo.stop(true,true).animate(param,200).find('img').stop(true,true).animate({'width':'-=40px','height':'-=40px'},200)}e.preventDefault()});$container.find('.delete').bind('click',function(){var $photo=$(this).parent();var $photoT=parseFloat($photo.css('top'),10);var $photoL=parseFloat($photo.css('left'),10);var $photoZIndex=$photo.css('z-index');var $trash=$('<div />',{'className':'pd_paperball','style':'top:'+parseInt($photoT+photoH/2)+'px;left:'+parseInt($photoL+photoW/2)+'px;width:0px;height:0px;z-index:'+$photoZIndex}).appendTo($container);$trash.animate({'width':photoW+'px','height':photoH+'px','top':$photoT+'px','left':$photoL+'px'},100,function(){var $this=$(this);setTimeout(function(){$this.remove()},800)});$photo.animate({'width':'0px','height':'0px','top':$photoT+photoH/2+'px','left':$photoL+photoW/2+'px'},200,function(){--photosSize;$(this).remove()})});function stack(){navPage=0;var cnt_photos=0;var windowsW=$(window).width();var windowsH=$(window).height();$container.find('.pd_photo').each(function(i){var $photo=$(this);$photo.css('z-index',parseInt(findHighestZIndex())+1000+i).stop(true).animate({'top':parseInt((windowsH-100)/2-photoH/2)+'px','left':parseInt((windowsW-100)/2-photoW/2)+'px'},800,function(){$options.find('.backdesk').show();var $photo=$(this);$photo.unbind('mousemove');++cnt_photos;var $nav=$('<a class="pd_next_photo" style="display:none;"></a>');$nav.bind('click',function(){$(this).remove();navigate()});$photo.prepend($nav);$photo.draggable('destroy').find('.delete').hide().andSelf().find('.pd_hold').unbind('mousedown').bind('mousedown',function(){return false});$options.find('.shuffle,.viewall').unbind('click');if(cnt_photos==photosSize)enlarge(findElementHighestZIndex())})})}function enlarge($photo){var windowsW=$(window).width();var windowsH=$(window).height();if(ie)var param={'width':'+=200px','height':'+=200px','top':parseInt((windowsH-100)/2-(photoH+200)/2)+'px','left':parseInt((windowsW-100)/2-(photoW+200)/2)+'px'};else var param={'width':'+=200px','height':'+=200px','top':parseInt((windowsH-100)/2-(photoH+200)/2)+'px','left':parseInt((windowsW-100)/2-(photoW+200)/2)+'px','rotate':'0deg','shadow':'5px 5px 15px #222'};$photo.animate(param,500,function(){idxLarge=$(this).index();var $photo=$(this);$photo.unbind('mousemove').bind('mousemove',function(){$(this).find('.pd_next_photo').show()}).unbind('mouseleave').bind('mouseleave',function(){$(this).find('.pd_next_photo').hide()})}).find('img').animate({'width':'+=200px','height':'+=200px'},500)}function disperse(){var windowsW=$(window).width();var windowsH=$(window).height();$container.find('.pd_photo').each(function(i){var $photo=$(this);if($photo.index()==idxLarge){if(ie)var param={'top':parseInt((windowsH-100)/2-photoH/2)+'px','left':parseInt((windowsW-100)/2-photoW/2)+'px','width':'170px','height':'170px'};else var param={'top':parseInt((windowsH-100)/2-photoH/2)+'px','left':parseInt((windowsW-100)/2-photoW/2)+'px','width':'170px','height':'170px','shadow':'1px 1px 5px #555'};$photo.stop(true).animate(param,500,function(){shuffle();$options.find('.viewall').show()}).find('img').animate({'width':'170px','height':'170px'},500)}});$container.find('.pd_next_photo').remove();bindEvents()}function bindEvents(){$options.find('.shuffle').unbind('click').bind('click',function(e){if(photosSize==0)return;shuffle();e.preventDefault()}).andSelf().find('.viewall').unbind('click').bind('click',function(e){var $this=$(this);if(photosSize==0)return;stack();$this.hide();e.preventDefault()}).andSelf().find('.backdesk').unbind('click').bind('click',function(e){var $this=$(this);if(photosSize==0)return;disperse();$this.hide();e.preventDefault()});$container.find('.pd_photo').each(function(i){var $photo=$(this);$photo.draggable({containment:'#pd_container'}).find('.delete').show()}).find('.pd_hold').unbind('mousedown').bind('mousedown',function(e){var $photo=$(this).parent();mouseDown($photo);e.preventDefault()})}function navigate(){if(photosSize==0)return;var tableW=$container.width();var tableH=$container.height();var horizontalMax=tableW-photoW;var verticalMax=tableH-photoH;var $photo=$container.find('.pd_photo:nth-child('+parseInt(idxLarge+1)+')');var r=Math.floor(Math.random()*201)-100;if(ie)var param={'top':Math.floor(Math.random()*verticalMax)+'px','left':Math.floor(Math.random()*horizontalMax)+'px','width':'170px','height':'170px'};else var param={'top':Math.floor(Math.random()*verticalMax)+'px','left':Math.floor(Math.random()*horizontalMax)+'px','width':'170px','height':'170px','rotate':r+'deg','shadow':'1px 1px 5px #555'};$photo.stop(true).animate(param,500,function(){++navPage;var $photo=$(this);$container.append($photo.css('z-index',1));if(navPage<photosSize)enlarge(findElementHighestZIndex());else{$options.find('.backdesk').hide();$options.find('.viewall').show();bindEvents()}}).find('img').animate({'width':'170px','height':'170px'},500)}function shuffle(){var tableW=$container.width();var tableH=$container.height();var horizontalMax=tableW-photoW;var verticalMax=tableH-photoH;$container.find('.pd_photo').each(function(i){var $photo=$(this);var r=Math.floor(Math.random()*301)-100;if(ie)var param={'top':Math.floor(Math.random()*verticalMax)+'px','left':Math.floor(Math.random()*horizontalMax)+'px'};else var param={'top':Math.floor(Math.random()*verticalMax)+'px','left':Math.floor(Math.random()*horizontalMax)+'px','rotate':r+'deg'};$photo.animate(param,800)})}function findHighestZIndex(){var photos=$container.find('.pd_photo');var highest=0;photos.each(function(){var $photo=$(this);var zindex=$photo.css('z-index');if(parseInt(zindex)>highest){highest=zindex}});return highest}function findElementHighestZIndex(){var photos=$container.find('.pd_photo');var highest=0;var $elem;photos.each(function(){var $photo=$(this);var zindex=$photo.css('z-index');if(parseInt(zindex)>highest){highest=zindex;$elem=$photo}});return $elem}Array.prototype.remove=function(from,to){var rest=this.slice((to||from)+1||this.length);this.length=from<0?this.length+from:from;return this.push.apply(this,rest)}});
</script>
HTML::
<div id='gallerybox'>
<div><a id="pd_loading" href="#" class="pd_loading"></a></div>
<div id="pd_options_bar" class="pd_options_bar">
<a href="" class="shuffle">Shuffle</a>
<a href="" class="backdesk" style="display:none;">Back to Desk</a>
<a href="" class="viewall">View All</a>
</div>
<div id="pd_container" class="pd_container">
<div class="pd_photo">
<div class="pd_hold">
<img src="http://favim.com/orig/201105/17/baby-baby-girl-beautiful-child-cute-girl-Favim.com-48227.jpg" alt=""/>
</div>
<span class="delete"></span>
</div>
<div class="pd_photo">
<div class="pd_hold">
<img src="http://data.whicdn.com/images/35398355/face-cute-girl-nina-dobrev-hair-look-photos_large.jpg" alt=""/>
</div>
<span class="delete"></span>
</div>
<div class="pd_photo">
<div class="pd_hold">
<img src="http://s2.favim.com/orig/35/asian-asian-girl-cute-free-girl-Favim.com-281584.jpg" alt=""/>
</div>
<span class="delete"></span>
</div>
<div class="pd_photo">
<div class="pd_hold">
<img src="http://parttimebkk2556.files.wordpress.com/2012/12/cute-korean-girls02.jpg" alt=""/>
</div>
<span class="delete"></span>
</div>
<div class="pd_photo">
<div class="pd_hold">
<img src="http://25.media.tumblr.com/tumblr_m41qspMUvL1rphuipo4_1280.jpg" alt=""/>
</div>
<span class="delete"></span>
</div>
<div class="pd_photo">
<div class="pd_hold">
<img src="http://happy.ap.teacup.com/yukarisuketetu/timg/middle_1338987463.jpg" alt=""/>
</div>
<span class="delete"></span>
</div>
<div class="pd_photo">
<div class="pd_hold">
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1zaS3Xb4rXXXI.Zo9_102633.jpg" alt=""/>
</div>
<span class="delete"></span>
</div>
</div>
</div>
Example Interactive Gallery Photo Desk With jQuery & CSS3.!
