Building Your Own Lightbox with Simple Code

Masih ingat dengan postingan si bloglang ganteng kalem tea sebelumnya mengenai What Are You Doing :-/ dan trik Dropcaps on Comments for Blogger!!! Artikel kali ini masih disekitaran web yg bertemakan "Front-end developer, user experience designer & Jedi" dengan nama webnya yaitu http://kilianvalkhof.com ;)) :D Setelah mengubek-ngubek jatuhlah artikel seleksi untuk dibagikan kepada sobat blogger. Trik kali ini akan membicarakan mengenai lightbox. Lightbox tidak lebih dari trick menyembunyikan sesuatu bisa berupa gambar, frame, flash dsb. Kebanyakan mah sih untuk gambar :D Jika sobat mencari lightbox yg pretty dan gaya mungkin Beben bisa kasih pilihan No Margin For Errors.

Di web tersebut terdapat 3 kategori edan punya mengenai pretty loader, pretty sociable dan pretty photo ;) Selama BW (Blog Walking) dan membaca mengenai trik lightbox ini, ternyata membutuhkan kode² dan script² lumayan banyak sob :-< class="fullpost">

Kode CSS

Selalu letakan diatas/sebelum kode ]]></b:skin> kode² CSS itu yah :)

.overlay {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:#000;
opacity:0;
filter:alpha(opacity=0);
z-index:50;
cursor:pointer;
}
.container {
position:absolute;
opacity:0;
filter:alpha(opacity=0);
left:-9999em;
z-index:51;
}

Karena Plug-in, sobat harus sudah memiliki jQuery script minimal versi jQuery 1.2.6 Kalau sudah punya versi terbaru jangan dipakai lagi yah :D

Script

$(document).ready(function(){
// add a click event
$(".lightbox").click(function(){
overlayLink = $(this).attr("href");
window.startOverlay(overlayLink);
return false;
});
});

function startOverlay(overlayLink) {
//add the elements to the dom
$("body")
.append('

')
.css({"overflow-y":"hidden"});

//animate the semitransparant layer
$(".overlay").animate({"opacity":"0.6"}, 400, "linear");

//add the lightbox image to the DOM
$(".container").html('');

//position it correctly after downloading
$(".container img").load(function() {
var imgWidth = $(".container img").width();
var imgHeight = $(".container img").height();
$(".container")
.css({
"top": "50%",
"left": "50%",
"width": imgWidth,
"height": imgHeight,
"margin-top": -(imgHeight/2),
"margin-left":-(imgWidth/2) //to position it in the middle

})
.animate({"opacity":"1"}, 400, "linear");

// you need to initiate the removeoverlay function here, otherwise it will not execute.
window.removeOverlay();
});
}
function removeOverlay() {
// allow users to be able to close the lightbox
$(".overlay").click(function(){
$(".container, .overlay").animate({"opacity":"0"}, 200, "linear", function(){
$(".container, .overlay").remove();
});
});
}

Letakan script plug-in itu dibawah tepat jQuery versi yg dimiliki sobat kalau enggak coba letakan diatas/sebelum kode tag </body> Jika akan memosting dan akan dimasukin trik lightbox ini maka dalam penulisan syntax link tinggal menambahkan kode class="lightbox"
<a href="http://LINK-GAMBAR-ATAU-BLABLABLA.GIF" class="lightbox">Link Lightbox!</a>Source by: http://kilianvalkhof.com/2008/javascript/building-your-own-lightbox-part-1/
Good Luck and see you sob :)