Slider Deposit Photos
Get tutorial on Beben Koben Blog
by Beben Koben
HTML
<h1>Tutorial Blog for Stylish Blogger</h1>
<div id='casing'>
<div id='slider'>
<div class='slider_container' id='slider_container'>
<div class='slider_area slider_area1'>
<img alt='Box 1 Image 1' class='slider_visible' src='http://1.bp.blogspot.com/_nI2w1Z0MWcE/TSGabcsMrcI/AAAAAAAABe8/SAU5tCJOOMs/s400/Image_11.jpg'/>
<img alt='Box 1 Image 2' src='http://4.bp.blogspot.com/_nI2w1Z0MWcE/TSGYQSxvjRI/AAAAAAAABek/Xag4TNKVois/s400/Image_9.jpg'/>
<img alt='Box 1 Image 3' src='http://1.bp.blogspot.com/_nI2w1Z0MWcE/TSGVVAFZxFI/AAAAAAAABeM/__UoJEdpQJ0/s260-c/Image_6.jpg'/>
</div>
<div class='slider_area slider_area2'>
<img alt='Box 2 Image1' class='slider_visible' src='http://3.bp.blogspot.com/_nI2w1Z0MWcE/TSp-uwjj5XI/AAAAAAAABhs/5vJlp5Hf0Y4/s1600/Box2_Image_1.jpg'/>
<img alt='Box 2 Image 2' src='http://2.bp.blogspot.com/_nI2w1Z0MWcE/TSp_A5neFqI/AAAAAAAABh0/sjt3J4GTvRE/s1600/Box2_Image_2.jpg'/>
<img alt='Box 2 Image 3' src='http://1.bp.blogspot.com/_nI2w1Z0MWcE/TSp_Sl4ybeI/AAAAAAAABh8/FAQT2ul-w-Q/s1600/Box2_image_3.jpg'/>
</div>
<div class='slider_area slider_area3'>
<img alt='Box 3 Image 1' class='slider_visible' src='http://4.bp.blogspot.com/_nI2w1Z0MWcE/TSp_lH8D6CI/AAAAAAAABiE/cBsBat-qKOc/s1600/Box3_image_1.jpg'/>
<img alt='Box 3 Image 2' src='http://4.bp.blogspot.com/_nI2w1Z0MWcE/TSp_2-kMnrI/AAAAAAAABiM/UKMV6egjx0w/s1600/Box3_Image_2.jpg'/>
<img alt='Box 3 Image 3' src='http://4.bp.blogspot.com/_nI2w1Z0MWcE/TSqAJ6AU35I/AAAAAAAABiU/2f8AoBIsR7k/s1600/Box3_Image_3.jpg'/>
</div>
<div class='slider_area slider_area4'>
<img alt='Box 4 Image 1' class='slider_visible' src='http://4.bp.blogspot.com/_nI2w1Z0MWcE/TSGSkiu2s4I/AAAAAAAABds/iwYBmvfzXZ0/s232/Image_2.jpg'/>
<img alt='Box 4 Image 2' src='http://4.bp.blogspot.com/_nI2w1Z0MWcE/TSGUiTWHh5I/AAAAAAAABeE/sAy7w5WDY_8/s232/Image_3.jpg'/>
<img alt='Box 4 Image 3' src='http://2.bp.blogspot.com/_nI2w1Z0MWcE/TSGT-ODuwmI/AAAAAAAABd8/Q1APzuNi_OI/s232/Image_4.jpg'/>
</div>
<div class='slider_area slider_area5'>
<img alt='Box 5...CSS
*
{margin:0;padding:0;}
body
{background:#debe94;color:#000;font:15px Calibri, Arial, sans-serif;text-shadow:1px 1px 1px #FFFFFF;padding:10px;}
a,a:visited
{text-decoration:none;outline:none;color:#a00;}
a:hover
{color:#fff;}
footer
{background:#D3A76F;position:fixed;width:100%;border-top:1px solid #333;height:70px;bottom:0;left:0;color:#fff;text-shadow:1px 2px 0 #000;}
footer h2
{font:25px/26px Acens;font-weight:bold;left:70%;margin:0px 0 0 150px;padding:20px 0;position:relative;width:400px;}
footer a.orig,
a.orig:visited
{-moz-box-shadow:0px 0px 20px #000;-webkit-box-shadow:0px 0px 20px #000;box-shadow:0px 0px 20px #000;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
text-decoration:blink;
font-weight:bold;
color:#f00;
font-size:14px;
left:37%;
line-height:46px;
margin:12px 0 0 -405px;
position:absolute;
top:0;
width:75px;
}
.cred {padding-top:15px;}
h1{text-align:center;text-shadow:3px 3px 5px #000;padding:55px;font-family: Verdana, Geneva, sans-serif;font-size:20pt;color:#D3A76F;}
#casing {
padding:10px;
width:950px;
margin:0px auto;
background:#fff;
}
#slider {
margin: 0;
padding: 10px 10px 15px;
background: #fdfdfd;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
}
.slider_container {
position: relative;
width: 940px;
margin: 0px;
height: 464px;
overflow: hidden;
clear: both;
cursor: pointer;
}
.slider_container .slider_area {
position: absolute;
overflow: hidden;
}
.slider_area img {
position: absolute;
padding: 5px;
border: 1px solid #dfdfdf;
background: #fdfdfd;
margin: 0;
display: none;
}
.slider_area img.slider_visible {
display: block;
z-index: 9999;
}
.slider_area1 {
margin: 5px;
}
.slider_area4 {
margin: 5px;
}
.slider_area3 {
margin: 5px;
}
.slider_area1 {
width: 435px;
height: 334px;
top: 0px;
left: 0px;
}
.slider_area1 img {
width: 420px;
height: 310px;
}
.slider_area2 {
width: 475px;
height: 160px;
top: 5px;
left: 450px;
}
.slider_area2 img {
width: 460px;
height:...JavaScript
$(function() {
//custom animations to use
//in the transitions
var animations = ['right','left','top','bottom','rightFade','leftFade','topFade','bottomFade'];
var total_anim = animations.length;
//just change this to one of your choice
var easeType = 'swing';
//the speed of each transition
var animSpeed = 450;
//caching
var $slider_container = $('#slider_container');
var $slider_areas = $slider_container.find('.slider_area');
//first preload all images
$slider_images = $slider_container.find('img');
var total_images = $slider_images.length;
var cnt = 0;
$slider_images.each(function(){
var $this = $(this);
$('<img/>').load(function(){
++cnt;
if(cnt == total_images){
$slider_areas.each(function(){
var $area = $(this);
//when the mouse enters the area we animate the current
//image (random animation from array animations),
//so that the next one gets visible.
//"over" is a flag indicating if we can animate
//an area or not (we don't want 2 animations
//at the same time for each area)
$area.data('over',true).bind('mouseenter',function(){
if($area.data('over')){
$area.data('over',false);
//how many images in this area?
var total = $area.children().length;
//visible image
var $current = $area.find('img:visible');
//index of visible image
var idx_current = $current.index();
//the next image that's going to be displayed.
//either the next one, or the first one if the current is the last
var $next = (idx_current == total-1) ? $area.children(':first') : $current.next();
//show next one (not yet visible)
$next.show();
//get a random animation
var anim = animations[Math.floor(Math.random()*total_anim)];
switch(anim){
//current slides out from the right
case 'right':
$current.animate({
'left':$current.width()+'px'
},
animSpeed,
easeType,
function(){
$current.hide().css({
'z-index' : '1',
'left' :...