Setelah mikir-mikir dan bingung gimana cara membuat image lightbox / gambar yang ketika diklik akan terbuka pada sebuah frame yang akan meload ukuran asli dari gambar tersebut, nah setelah berselancar dan mencari referensi akhirnya kodepun selesai ditulis kali ini memanfaatkan jquery jadi kalau mau menggunakan trik ini kita harus sudah memasang framework jquery diblog masing2.
ILUSTRASI
<script type="text/javascript">
//<![CDATA[
$(function(){
//Seleksi link yang berekstensi .jpg .jpeg .png .gif
var $linkgambar = $('a[href$="jpg"], a[href$="jpeg"], a[href$="png"], a[href$="gif"]');
$linkgambar.click(function(){
//Mendapatkan nilai href
var b = $(this).attr('href');
//Seleksi elemen img
var x = $('#img img');
//saat link gambar diklik tampilkan #img
//yang sebelumnya display:none
$('#img').fadeIn();
//Ubah nilai src dari elemen img yang ada didalam elemen #img
//dengan nilai scr berdasarkan URL pada link
x.attr('src',this);
return false;
});
$('.close').click(function(){
//Saat .close diklik hilangkan elemen #img
$('#img').fadeOut();
//Dan kosongkan nilai scrnya
$('#img img').attr('src','');
});
});
//]]>
</script>Simpan DOM jquerynya dibawah FrameWork jquery
#img {
overflow: hidden;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(170, 156, 204, 0.5);
text-align: center;
display: none
}
#img img {
max-width: 100%;
max-height: 100%
}
.close {
width: 30px;
height: 30px;
background: #DB9A9A;
position: absolute;
top: 0;
right: 0;
font: normal 20px/30px Arial,sans-serif;
cursor: pointer
}Simpan kode cssnya diatas
]]></b:skin><div id='img'> <img src=''/> <div class='close'>✖</div> </div>
Simpan kode HTML dibawah
<body>Cara pemanggilannya pun seperti biasa gak pake kelas atau embel2 lainnya karena pada jquerynya kita sudah menseleksi link yang khusus ber_Akhiran
.jpg .jpeg .png .gif<a href="link-gambar-asli.png"><img src="link-gambar-thumbnail.png"/></a>
