Membuat Galeri Foto Interaktif Dengan jQuery Dan Css3

Membuat Galeri Foto Interaktif Dengan jQuery Dan Css3 12:12
Membuat Galeri Foto Interaktif Dengan jQuery Dan Css3 - Dalam posting seputar Blogging kali ini saya akan menambah ilmu tambahan buat anda hari ini , tentang membuat Galeri Foto di Blog dengan gaya Interaktif dan sudah di jamin keren sekali . 

Yang unik dari Galeri foto ini adalah kemampuannya menangapi respon penguna untuk menggeser dan bahkan melempar salah satu foto .

Dai pada penasaran , silahkan untuk melihat hasil jadinya klik disini .

Karena saya bukanlah Creatr dari master piece ini maka saya tidak bisa banyak menjelaskan tentang semua fitur dan komponen yang digunakan , hanya saja saya akan menujukkan bagaimana menerapkannya di Blog anda jika anda ingin memilikinya .

Mari kita lakukan langkah pemasangannya dibawah ini .

Pada kasus ini kita akan membutuhkan 3 Elemen yaitu HTML,Javascript+Plugin jQuery dan juga css3 .
Untuk itu silahkan ketiga Komponen dibawah ini .

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;}
Jika anda ingin memasang Script ini di halaman Posting atau laman statis maka letakkan tag <style type='text/css'> di awal kode Css dan </style> sebagai penutup kode Css diatas .

JavaScript
<!-- 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>
 Anda bisa saja menanamkan Kode Css dan JavaScript diatas pada Template anda dan meletakkan Kode HTMLnya pada Widget , tapi perlu diperhatikan Kode Script yang saya beri warna merah diatas . Jika di template anda sudah terdapat kode seperti itu entah versi berapa saja , maka hapus kode tersebut diatas yang berwarna merah . krena hanya boleh ada satu Script ajax di dalam template .

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>
Untuk melihat hasil contoh dari Galleri foto ini anda juga bisa melihatnya dibawah ini .

Share this Article

Related Posts

Previous
Next Post »

Arahkan Kursor dibawah ini untuk memberikan komentar.
No HyperLink dan Komentar Hit&Run akan diacuhkan . Berkomentarlah dengan bahasa yang baik dan benar EmoticonEmoticon