Dalam tutorial ini kita akan membuat galeri gambar dengan tampilan Polaroid. Kami akan memiliki album yang akan memperluas ke set thumbnail sedikit diputar yang bermunculan di hover. Gambar penuh akan meluncur di dari bawah sekali thumbnail diklik. Pada tampilan gambar penuh pengguna dapat menavigasi melalui gambar atau hanya memilih thumbnail lain yang akan ditampilkan.
The Markup
Kita akan mencakup semua HTML ke dalam div dengan class "pp_gallery". Ini akan terdiri dari div loading, navigasi yang akan muncul ketika container thumbnail utama gambar penuh di tampilkan.
Di dalam container thumbnail kita gunakan class "pp_thumbContainer", kita akan memiliki beberapa div untuk album dan div untuk kembali ke tampilan album. Setiap album akan berisi thumbnail dengan deskripsi di dalam div class "konten". Kita juga akan mencakup elemen div untuk deskripsi album itu sendiri.
<div id="pp_gallery" class="pp_gallery">
<div id="pp_loading" class="pp_loading"></div>
<div id="pp_next" class="pp_next"></div>
<div id="pp_prev" class="pp_prev"></div>
<div id="pp_thumbContainer">
<div class="album">
<div class="content">
<img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" />
<span>The Sixties by Tetsumo</span>
</div>
<div class="content">
<img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" />
<span>The Sixties by Tetsumo</span>
</div>
...
<div class="descr">
The Sixties
</div>
</div>
<div class="album" style="bottom:-90px;">
...
</div>
...
<div class="pp_back">Albums</div>
</div>
</div>
Struktur HTML preview gambar penuh kita buat secara dinamis, berikut kodenya:
<div id="pp_preview" class="pp_preview">
<img src="images/album1/1.jpg" />
<div class="pp_descr"><span>Description</span></div>
</div>
The CSS
Kita akan mulai dengan css reset dan beberapa style umum untuk body:
*{
margin:0;
padding:0;
}
body{
background:#000 url(../bg.jpg) repeat center center;
font-family:"Myriad Pro", "Trebuchet MS", Helvetica, sans-serif;
font-size:12px;
color: #fff;
overflow:hidden;
}Selanjutnya, kita akan membuat style div loading dan navigasi untuk melangkah melalui gambar ketika kita berada dalam mode preview:
.pp_loading{
display:none;
position:fixed;
top:50%;
left:50%;
margin:-35px 0px 0px -35px;
background:#fff url(../icons/loader.gif) no-repeat center center;
width:70px;
height:70px;
z-index:999;
opacity:0.7;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
.pp_next, .pp_prev{
cursor:pointer;
top:50%;
margin-top:-16px;
width:32px;
height:32px;
position:fixed;
text-align:center;
border:1px solid #111;
color:#fff;
-moz-box-shadow:0px 0px 3px #000;
-webkit-box-shadow:0px 0px 3px #000;
box-shadow:0px 0px 3px #000;
}
.pp_next{
right:-40px;
background:#222 url(../icons/next.png) no-repeat center center;
}
.pp_prev{
left:-40px;
background:#222 url(../icons/prev.png) no-repeat center center;
}div loading di posisikan tepat di tengah layar menggunakan 50% negative margin trick, kita dapat mengatur bagian atas dan kiri untuk 50% dan menambahkan margin atas dan kiri dengan nilai negatif dari setengah dari lebar elemen, atau tinggi, masing-masing.
Hal yang sama kita lakukan untuk item navigasi, hanya saja di sini elemen vertikal akan berpusat di tengah.
Thumbnail kontainer akan diposisikan di bagian bawah halaman:
#pp_thumbContainer{
position:fixed;
bottom:0px;
left:0px;
height:65px;
width:100%;
}Awalnya album tersembunyi tapi ketika kita buka halaman, album akan meluncur dari bawah, jadi kita akan menetapkan nilai dasar awal untuk -90 piksel:
#pp_thumbContainer .album{
position:absolute;
width:200px;
height:65px;
bottom:-90px;
}Nilai kiri untuk posisi album akan dihitung secara dinamis pada page load. Kita akan menyebarkan semua album merata di seluruh lebar halaman.
Uraian tentang album dan elemen kembali akan di bagi menjadi beberapa gaya:
.album .descr,
.pp_back{
position:absolute;
bottom:0px;
left:-16px;
background:#222;
text-align:center;
border:1px solid #111;
padding:5px;
cursor:pointer;
width:169px;
color:#fff;
cursor:pointer;
text-shadow:0px 0px 1px #fff;
-moz-box-shadow:1px 1px 4px #000;
-webkit-box-shadow:1px 1px 4px #000;
box-shadow:1px 1px 4px #000;
text-transform:uppercase;
bottom:120px;
left:-100px;
width:80px;
}
Wrapper untuk gambar dan judul gambar akan memiliki gaya berikut:
#pp_thumbContainer .content{
position:absolute;
top:0px;
height:155px;
cursor:pointer;
}
#pp_thumbContainer img{
border:5px solid #fff;
-moz-box-shadow:1px 1px 7px #000;
-webkit-box-shadow:1px 1px 7px #000;
box-shadow:1px 1px 7px #000;
}
.pp_preview{
position:fixed;
top:150%;
left:50%;
}
.pp_preview img{
position:absolute;
top:0px;
left:0px;
border:10px solid #fff;
border-bottom:45px solid #fff;
-moz-box-shadow:1px 1px 7px #000;
-webkit-box-shadow:1px 1px 7px #000;
box-shadow:1px 1px 7px #000;
}
.pp_descr{
height:45px;
line-height:45px;
font-size:20px;
width:100%;
bottom:0px;
left:0px;
position:absolute;
text-align:center;
color:#00021c;
}The JavaScript
Akan ada banyak animasi di seluruh JavaScript. Album akan bergeser dari bawah ketika halaman mulai loading. Setelah album diklik, kita akan melihat tampilan thumbnail gambar dalam album. Ketika kita memilih thumbnail, kita perlu menciptakan div pratinjau dan slider dalam dari bawah. Gambar akan diubah ukurannya sehingga cocok ke jendela.
var ie = false;
if ($.browser.msie) {
ie = true;
}
//current album/image displayed
var current = -1;
var album = -1;
//windows width
var w_width = $(window).width();
//caching
var $albums = $('#pp_thumbContainer div.album');
var $loader = $('#pp_loading');
var $next = $('#pp_next');
var $prev = $('#pp_prev');
var $images = $('#pp_thumbContainer div.content img');
var $back = $('#pp_back');
var nmb_albums = $albums.length;
var spaces = w_width/(nmb_albums+1);
var cnt = 0;
//preload all the images (thumbs)
var nmb_images = $images.length;
var loaded = 0;
$images.each(function(i){
var $image = $(this);
$('<img />').load(function(){
++loaded;
if(loaded == nmb_images){
//let's spread the albums evenly at the bottom of the page
$albums.each(function(){
var $this = $(this);
++cnt;
var left = spaces*cnt - $this.width()/2;
$this.css('left',left+'px');
$this.stop().animate({'bottom':'0px'},500);
}).unbind('click').bind('click',spreadPictures);
//also rotate each picture of an album with a random number of degrees
$images.each(function(){
var $this = $(this);
var r = Math.floor(Math.random()*41)-20;
$this.transform({'rotate' : r + 'deg'});
});
}
}).attr('src', $image.attr('src'));
});
spreadPictures function akan melakukan hal yang sama: akan memindahkan album yang dipilih ke kiri dan tersebar ke seluruh thumbnail:
function spreadPictures(){
var $album = $(this);
//track which album is opened
album = $album.index();
//hide all the other albums
$albums.not($album).stop().animate({'bottom':'-90px'},300);
$album.unbind('click');
//now move the current album to the left
//and at the same time spread its images throughout
//the window, rotating them randomly, hide the description of the album
//store the current left for the reverse operation
$album.data('left',$album.css('left'))
.stop()
.animate({'left':'0px'},500)
.find('.descr')
.stop()
.animate({'bottom':'-30px'},200);
var total_pic = $album.find('.content').length;
var cnt = 0;
//each picture
$album.find('.content')
.each(function(){
var $content = $(this);
++cnt;
//window width
var w_width = $(window).width();
var spaces = w_width/(total_pic+1);
var left = (spaces*cnt) - (140/2);
var r = Math.floor(Math.random()*41)-20;
//var r = Math.floor(Math.random()*81)-40;
$content.stop().animate({'left':left+'px'},500,function(){
$(this).unbind('click')
.bind('click',showImage)
.unbind('mouseenter')
.bind('mouseenter',upImage)
.unbind('mouseleave')
.bind('mouseleave',downImage);
}).find('img')
.stop()
.animate({'rotate': r+'deg'},300);
$back.stop().animate({'left':'0px'},300);
});
}Sekarang kita akan menentukan apa yang terjadi ketika kita klik pada item untuk kembali ke tampilan album. Kita akan menampilkan album ke posisi kiri awal dan album lain lagi. Jika pengguna sedang melihat gambar penuh, kita akan membuat slide ke atas, keluar dari jendela (hideCurrentPicture):
$back.bind('click',function(){
$back.stop().animate({'left':'-100px'},300);
hideNavigation();
//there's a picture being displayed
//lets slide the current one up
if(current != -1){
hideCurrentPicture();
}
var $current_album = $('#pp_thumbContainer div.album:nth-child('+parseInt(album+1)+')');
$current_album.stop()
.animate({'left':$current_album.data('left')},500)
.find('.descr')
.stop()
.animate({'bottom':'0px'},500);
$current_album.unbind('click')
.bind('click',spreadPictures);
$current_album.find('.content')
.each(function(){
var $content = $(this);
$content.unbind('mouseenter mouseleave click');
$content.stop().animate({'left':'0px'},500);
});
$albums.not($current_album).stop().animate({'bottom':'0px'},500);
});Fungsi berikutnya, yang disebut showImage, akan menampilkan gambar penuh dengan menggesernya dari bawah. Jika ada gambar lain yang ditampilkan, kita akan geser yang satu. Untuk preview, kita perlu mengatur margin negatif (-) sesuai dengan lebar dan tinggi gambar. Kita juga akan memutar preview secara acak:
function showImage(nav){
if(nav == 1){
//reached the first one
if(current==0){
return;
}
var $content = $('#pp_thumbContainer div.album:nth-child('+parseInt(album+1)+')')
.find('.content:nth-child('+parseInt(current)+')');
//reached the last one
if($content.length==0){
current-=2;
return;
}
}
else
var $content = $(this);
//show ajax loading image
$loader.show();
//there's a picture being displayed
//lets slide the current one up
if(current != -1){
hideCurrentPicture();
}
current = $content.index();
var $thumb = $content.find('img');
var imgL_source = $thumb.attr('alt');
var imgL_description = $thumb.next().html();
//preload the large image to show
$('<img style=""/>').load(function(){
var $imgL = $(this);
//resize the image based on the windows size
resize($imgL);
//create an element to include the large image
//and its description
var $preview = $('<div />',{
'id' : 'pp_preview',
'className' : 'pp_preview',
'html' : '<div class="pp_descr"><span>'+imgL_description+'</span></div>',
'style' : 'visibility:hidden;'
});
$preview.prepend($imgL);
$('#pp_gallery').prepend($preview);
var largeW = $imgL.width()+20;
var largeH = $imgL.height()+10+45;
//change the properties of the wrapping div
//to fit the large image sizes
$preview.css({
'width' :largeW+'px',
'height' :largeH+'px',
'marginTop' :-largeH/2-20+'px',
'marginLeft' :-largeW/2+'px',
'visibility' :'visible'
});
Cufon.replace('.pp_descr');
//show navigation
showNavigation();
//hide the ajax image loading
$loader.hide();
//slide up (also rotating) the large image
var r = Math.floor(Math.random()*41)-20;
if(ie)
var param = {
'top':'50%'
};
else
var param = {
'top':'50%',
'rotate': r+'deg'
};
$preview.stop().animate(param,500);
}).error(function(){
//error loading image.
//Maybe show a message : 'no preview available'
}).attr('src',imgL_source);
}
//click next image
$next.bind('click',function(){
current+=2;
showImage(1);
});
//click previous image
$prev.bind('click',function(){
showImage(1);
});
//slides up the current picture
function hideCurrentPicture(){
current = -1;
var r = Math.floor(Math.random()*41)-20;
if(ie)
var param = {
'top':'-100%'
};
else
var param = {
'top':'-100%',
'rotate': r+'deg'
};
$('#pp_preview').stop()
.animate(param,500,function(){
$(this).remove();
});
}
//shows the navigation buttons
function showNavigation(){
$next.stop().animate({'right':'0px'},100);
$prev.stop().animate({'left':'0px'},100);
}
//hides the navigation buttons
function hideNavigation(){
$next.stop().animate({'right':'-40px'},300);
$prev.stop().animate({'left':'-40px'},300);
}
function upImage(){
var $content = $(this);
$content.stop().animate({
'marginTop' : '-70px'
},400).find('img')
.stop()
.animate({'rotate': '0deg'},400);
}
function downImage(){
var $content = $(this);
var r = Math.floor(Math.random()*41)-20;
$content.stop().animate({
'marginTop' : '0px'
},400).find('img').stop().animate({'rotate': r + 'deg'},400);
}Terakhir, kita akan menggunakan fungsi pengubah ukuran gambar penuh (full image) agar sesuai dengan ke jendela:
function resize($image){
var widthMargin = 50
var heightMargin = 200;
var windowH = $(window).height()-heightMargin;
var windowW = $(window).width()-widthMargin;
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'});
}Terakhir jangan lupa tambahkan javascript ini di atas </head>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Note_this_400.font.js" type="text/javascript"></script>
Sekian tutorial kali ini mengenai Polaroid Photobar Gallery with jQuery, semoga bermanfaat buat sobat semua!