Slider Deposit Photos jQuery Plugin

Sebenarnya mau memosting mengenai konten slider plugin jQuery sedikit kurang sreg. Selain rada membutuhkan skill guna memasukan ke dalam blog, deretan kode yang memang lumayan banyak bisa memusingkan kepala ;))
Jangan ditanya tutorial dari developer mengenai slider ini! Banyak dan hampir pada setiap web/blog ada saja artikelnya :d Koben menemukan macam gaya full stylish dari slider slideshow with jQuery
Karena issue responsive sekarang sedang melanda, maka alternatif slider keren berikut bisa di coba Modern Slide In Gue tidak akan membahas itu semua, tapi mau bahas satu slider unik dari postingan aku Template Pilihan Akhir Tahun. Tepatnya slider yg berada pada template Deposit Photos Template by Avinash Bhardwaj. Sorot-sorot pada gambar, klik pada image akan membuka semua efek b-)

Disana terdapat 5 area untuk gambar dan dibungkus oleh 1 tagging container/area.

.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: 144px;
}
.slider_area3{
width: 475px;
height: 160px;
top: 165px;
left: 445px;
}
.slider_area3 img {
width: 460px;
height: 144px;
}
.slider_area4 {
width: 176px;
height: 155px;
top: 334px;
left: 0px;
}
.slider_area4 img {
width: 155px;
height: 113px;
}
.slider_area5 {
width: 730px;
height: 135px;
top: 336px;
left: 194px;
}
.slider_area5 img {
width: 715px;
height: 115px;
}

Kesemuanya itu kemudian dibungkus kembali dengan tagging casing and slider area.

#casing {
padding: 10px;
width: 950px;
margin: 0 auto;
background: #fff;
}
#slider {
margin: 0;
padding: 10px 10px 15px;
background: #fdfdfd;
border: 1px solid #ddd;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
overflow: hidden;
}

Jadi kode CSS semua untuk slider deposit photos menjadi...

#casing {
padding: 10px;
width: 950px;
margin: 0 auto; /* make center */
background: #fff;
}
#slider {
margin: 0;
padding: 10px 10px 15px;
background: #fdfdfd;
border: 1px solid #ddd;
-moz-border-radius: 5px;
-webkit-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: 144px;
}
.slider_area3{
width: 475px;
height: 160px;
top: 165px;
left: 445px;
}
.slider_area3 img {
width: 460px;
height: 144px;
}
.slider_area4 {
width: 176px;
height: 155px;
top: 334px;
left: 0px;
}
.slider_area4 img {
width: 155px;
height: 113px;
}
.slider_area5 {
width: 730px;
height: 135px;
top: 336px;
left: 194px;
}
.slider_area5 img {
width: 715px;
height: 115px;
}

Plugin jQuery

<script type='text/javascript'>
//<![CDATA[
$(function(){var animations=['right','left','top','bottom','rightFade','leftFade','topFade','bottomFade'];var total_anim=animations.length;var easeType='swing';var animSpeed=450;var $slider_container=$('#slider_container');var $slider_areas=$slider_container.find('.slider_area');$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);$area.data('over',true).bind('mouseenter',function(){if($area.data('over')){$area.data('over',false);var total=$area.children().length;var $current=$area.find('img:visible');var idx_current=$current.index ();var $next=(idx_current==total-1)?$area.children(':first'):$current.next();$next.show();var anim=animations[Math.floor(Math.random()*total_anim)];switch(anim){case'right':$current.animate({'left': $current.width()+'px'},animSpeed,easeType,function(){$current.hide().css({'z-index':'1','left':'0px'});$next.css('z-index','9999');$area.data('over',true);});break;case'left':$current.animate({'left': -$current.width()+'px'},animSpeed,easeType,function(){$current.hide().css({'z-index':'1','left':'0px'});$next.css('z-index','9999');$area.data('over',true);});break;case'top':$current.animate({'top': -$current.height()+'px'},animSpeed,easeType,function(){$current.hide().css({'z-index':'1','top':'0px'});$next.css('z-index','9999');$area.data('over',true);});break;case'bottom':$current.animate({'top': $current.height()+'px'},animSpeed,easeType,function(){$current.hide().css({'z-index':'1','top':'0px'});$next.css('z-index','9999');$area.data('over',true);});break;case'rightFade':$current.animate({'left': $current.width()+'px','opacity':'0'},animSpeed,easeType,function(){$current.hide().css({'z-index':'1','left':'0px','opacity':'1'});$next.css('z-index','9999');$area.data('over',true);});break;case'leftFade':$current.animate({'left': -$current.width()+'px','opacity':'0'},animSpeed,easeType,function(){$current.hide().css({'z-index':'1','left':'0px','opacity':'1'});$next.css('z-index','9999');$area.data('over',true);});break;case'topFade':$current.animate({'top': -$current.height()+'px','opacity':'0'},animSpeed,easeType,function(){$current.hide().css({'z-index':'1','top':'0px','opacity':'1'});$next.css('z-index','9999');$area.data('over',true);});break;case'bottomFade':$current.animate({'top': $current.height()+'px','opacity':'0'},animSpeed,easeType,function(){$current.hide().css({'z-index':'1','top':'0px','opacity':'1'});$next.css('z-index','9999');$area.data('over',true);});break;default:$current.animate({'left': -$current.width()+'px'},animSpeed,easeType,function(){$current.hide().css({'z-index':'1','left':'0px'});$next.css('z-index','9999');$area.data('over',true);});break;}}});});$slider_container.bind('click',function(){$slider_areas.trigger('mouseenter');});}}).attr('src',$this.attr('src'));});});
//]]>
</script>

Markup HTML

<div id='casing'>
<div id='slider'>
<div class='slider_container' id='slider_container'>

<div class='slider_area slider_area1'>
<img alt='' class='slider_visible' src='IMAGE-TAMPAK1.jpg'/>
<img alt='' src='IMAGE-TAMPAK1-1.jpg'/>
<img alt='' src='IMAGE-TAMPAK1-2.jpg'/>
</div>

<div class='slider_area slider_area2'>
<img alt='' class='slider_visible' src='IMAGE-TAMPAK2.jpg'/>
<img alt='' src='IMAGE-TAMPAK2-1.jpg'/>
<img alt='' src='IMAGE-TAMPAK2-2.jpg'/>
</div>

<div class='slider_area slider_area3'>
<img alt='' class='slider_visible' src='IMAGE-TAMPAK3.jpg'/>
<img alt='' src='IMAGE-TAMPAK3-1.jpg'/>
<img alt='' src='IMAGE-TAMPAK3-2.jpg'/>
</div>

<div class='slider_area slider_area4'>
<img alt='' class='slider_visible' src='IMAGE-TAMPAK4.jpg'/>
<img alt='' src='IMAGE-TAMPAK4-1.jpg'/>
<img alt='' src='IMAGE-TAMPAK4-2.jpg'/>
</div>

<div class='slider_area slider_area5'>
<img alt='' class='slider_visible' src='IMAGE-TAMPAK5.jpg'/>
<img alt='' src='IMAGE-TAMPAK5-1.jpg'/>
<img alt='' src='IMAGE-TAMPAK5-2'/>
</div>

</div>
</div>
</div>Gantikan tulisan IMAGE-TAMPAK dengan link gambar :)
DONE.

Kata saya juga memusingkan kepala kan :))
Happy coding \m/