Pratinjau Gambar dengan Efek jQuery Facebox

Pratinjau Gambar dengan Efek jQuery Facebox^[1] (Image Privew with jQuery Facebox Effect) merupakan salah satu dari sekian banyak efek-efek^[2] pratinjau gambar dengan menggunakan framework jQuery. Prinsip kerjanya juga mirip-mirip antara satu efek dengan efek lainnya, kita bisa membandingkannya. Hanya saja dari sekian banyak efek pratinjau gambar yang pernah dicoba, efek facebox inilah yang paling cepat dan tidak terlalu memberatkan loading blog. Efek ini pula yang sekarang digunakan Blogger Tune-Up pada gambar yang disertakan pada setiap artikel.

Entah karena mirip efek yang digunakan facebook atau karena apa sehingga namanya menjadi Facebox. Tampilan efeknya cukup sederhana dengan paduan fade, zoom dan ukuran frame yang menyesuaikan dengan ukuran asli gambar. Silahkan klik gambar dibawah untuk demonya dan ikuti langkah penerapan Pratinjau Gambar dengan Efek Facebox jika sudah yakin ingin menggunakannya pada blog anda.

Integrasi Efek jQuery Facebox pada Template

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:

#facebox .b{background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDcQb9PsI/AAAAAAAAD10/tlsyech1rKQ/d/b.png)}
#facebox .tl{background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDwX017ZI/AAAAAAAAD2Y/9YvW1nyo3rE/d/tl.png)}
#facebox .tr{background:url(http://lh4.ggpht.com/_xcD4JK_dIjU/S4QD_EwzYDI/AAAAAAAAD2c/3y21OtLBoVQ/d/tr.png)}
#facebox .bl{background:url(http://lh5.ggpht.com/_xcD4JK_dIjU/S4QDcq5SDlI/AAAAAAAAD14/aMQ2Ep-Br8w/d/bl.png)}
#facebox .br{background:url(http://lh5.ggpht.com/_xcD4JK_dIjU/S4QDc2QNzQI/AAAAAAAAD18/5N4GZspRmRY/d/br.png)}
#facebox{left:0;position:absolute;text-align:left;top:0;width:100%;z-index:100}
#facebox .popup{position:relative}
#facebox table{border-collapse:collapse;margin:auto}
#facebox .body{background:#fff;padding:10px;width:370px}
#facebox img{background:transparent;border:0;margin:0;padding:0}
#facebox .footer{border-top:1px solid #DDD;margin-top:10px;padding-top:5px;text-align:right}
#facebox .tl,#facebox .tr,#facebox .bl,#facebox .br{height:10px;overflow:hidden;padding:0;width:10px}
#facebox .loading,#facebox .image{text-align:center}

Langkah 5
Cari kode dibawah ini:

</head>

Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 5:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://henscripts.googlecode.com/svn/trunk/jquery.facebox.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>

Langkah 7
Simpan template...

Setting Efek jQuery Facebox pada Artikel

Langkah A
Buat artikel dan upload sebuah gambar
Langkah B
Pastikan post editor berada pada mode Edit HTML, cari kode gambar seperti dibawah ini:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/.../s1600-h/gambar.jpg">
<img src="http://2.bp.blogspot.com/.../s400/gambar.jpg"/>
</a>

Langkah C
Sisipkan kode loader jQuery Facebox dan buang kode "-h" (tanpa tanda kutip) sehingga menjadi seperti dibawah ini:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/.../s1600/gambar.jpg" rel="facebox">
<img src="http://2.bp.blogspot.com/.../s400/gambar.jpg"/>
</a>

Langkah D
Terbitkan artikel anda...

Download jQuery Facebox Effect

Catatan kaki:
[1] Facebox
[2] Efek-efek gambar