Memasang prettyPhoto di Template Blogger

Tulisan ini akan membahas tentang cara memasang efek lightbox prettyPhoto di template Blogger dengan langkah-langkah yang sangat mudah, lebih mudah dari pemasangan efek lightbox yang pernah dibahas sebelumnya. Apa itu prettyPhoto? prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes. It’s a full blown media lightbox.  Kurang lebihnya, prettyPhoto adalah kloning dari jQuery Lightbox (yang terkenal itu) yang tidak hanya mendukung gambar, tetapi juga video, flash, YouTube, dan iframe. prettyPhoto dikembangkan oleh Mas Stephane Caron, yang juga membuat prettySociable. Oke, sudah siapkah Anda membaca lanjutan dari tulisan (yang saya buat dengan sedikit basa basi :D) ini?


Apa selanjutnya? mari kita cari kode </head>, kalau sudah ketemu, letakkan kode berikut di atasnya.

<!-- CSS prettyPhoto -->
<link href='http://dl.dropbox.com/u/18548998/Javascript/facebook.css' media='screen' rel='stylesheet' type='text/css'/>
<!-- jQuery -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js' type='text/javascript'/>

<script src='http://dl.dropbox.com/u/18548998/Javascript/jquery.prettyPhoto.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){ $(&quot;a[rel^=&#39;prettyPhoto&#39;]&quot;).prettyPhoto({
theme: &#39;facebook&#39;, /* light_rounded / dark_rounded / light_square / dark_square / facebook */
});
});
</script>


Keterangan kode di atas (tidak berlaku untuk kode di bawah):
Hijau - link dari css dengan tema facebook untuk prettyPhoto, silakan ganti dengan link css Anda sendiri atau gunakan saja link saya tersebut.
Oranye - kode jQuery, cek dahulu di template Anda, bila kode ini dobel, efeknya tidak akan bekerja.
Biru - tema default prettyPhoto adalah tema facebook, anda dapat menggantinya dengan tema lainnya dengan cara mengedit css prettyPhoto (bila Anda tidak paham bagaimana cara mengedit css, gunakan tema facebook)

Simpan template blogger Anda. Sip, pemasangan di template blogger sudah beres, agenda selanjutnya adalah memanggil efek prettyPhoto dengan sedikit modifikasi kode.


Untuk memasang prettyPhoto pada satu gambar saja*

<a href="http://lh5.ggpht.com/_BiYlG6sktcY/TDWDYPILmwI/AAAAAAAAA-Q/M_SwruKC-Z8/patung.jpg"  rel="prettyPhoto"  title="Patung"><img alt="Judul gambar"  src="http://2.bp.blogspot.com/_BiYlG6sktcY/TDVoCXxZY4I/AAAAAAAAA80/2QIPkhqvVXc/s320/tr-wp2.jpg" /></a>


Untuk memasang prettyPhoto pada kelompok gambar (group)*

<a href="http://lh6.ggpht.com/_BiYlG6sktcY/TDVvG5kh_fI/AAAAAAAAA94/UPjBxxlXmZo/contoh%203.jpg"  rel="prettyPhoto[gallery]"><img src="http://1.bp.blogspot.com/_BiYlG6sktcY/TDVoDUtAW7I/AAAAAAAAA88/8SJF3H36USI/s320/tr-wp3.jpg" /></a><a href="http://lh4.ggpht.com/_BiYlG6sktcY/TDWDXfBpreI/AAAAAAAAA-M/X1QAwF2pDjA/Gerbang.jpg" rel="prettyPhoto[gallery]"  title="Gerbang"><img  src="http://4.bp.blogspot.com/_BiYlG6sktcY/TDVoGIJgIyI/AAAAAAAAA9E/paQgCQkv8w8/s320/tr-wp4.jpg" /></a><a href="http://lh6.ggpht.com/_BiYlG6sktcY/TDVvHdDX09I/AAAAAAAAA-A/vOn39pc2WtA/contoh%205.jpg"  rel="prettyPhoto[gallery]" ><img  src="http://3.bp.blogspot.com/_BiYlG6sktcY/TDVqDSV2pTI/AAAAAAAAA9M/tdMEjZtu18Q/s320/tr-wp6.jpg" /></a>


*Cukup gunakan rel="prettyPhoto" (untuk satu gambar), rel="prettyPhoto[gallery]" untuk kelompok gambar, tambahkan title dan alt untuk menambahkan keterangan pada gambar.

#Tips
Untuk membedakan galeri yang satu dengan yang lain (agar tidak tercampur), ubah rel="prettyPhoto[gallery]" menjadi rel="prettyPhoto[gallery1]", atau rel="prettyPhoto[gallery2]", atau rel="prettyPhoto[piknik]", atau rel="prettyPhoto[liburan]".


Untuk memasang prettyPhoto pada link ke situs tertentu (iframe)

<a href="http://www.google.com/?iframe=true&amp;width=80%&amp;height=100%"  rel="prettyPhoto"><img src="http://4.bp.blogspot.com/_BiYlG6sktcY/TDVsBWmD19I/AAAAAAAAA9U/atLz7Kf0sL0/s320/google.jpg" /></a>

Ubah nilai (dalam %) pada kode yang ditandai dengan warna biru sesuai kebutuhan.


Untuk memasang prettyPhoto pada konten yang disembunyikan (inline)

<a href="#data" rel="prettyPhoto">Klik untuk membuka Lorem Ipsum</a>

<div style="display: none;">
<div id="data">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>



Untuk memasang video YouTube dengan prettyPhoto#

<a href="http://www.youtube.com/watch?v=hTMrlHHVx8A?width=640&amp;height=360"  rel="prettyPhoto"  title="Kings and Queens - 30 Seconds To Mars"><img alt="YouTube"  src="http://2.bp.blogspot.com/_BiYlG6sktcY/TDgX0-xgXnI/AAAAAAAAA-o/4c-0FGC0YMk/s320/king_%26_queen.jpg" /></a>


Untuk memasang video QuickTime dengan prettyPhoto#

<a href="http://trailers.apple.com/movies/universal/despicableme/despicableme-tlr1_r640s.mov?width=640&amp;height=360" rel="prettyPhoto" title="Despicable Me"><img alt="QuickTime" src="http://1.bp.blogspot.com/_BiYlG6sktcY/TDgdT_mjekI/AAAAAAAAA-w/zYGLd5ruSAg/s320/quicktime.jpg" /></a>

#Nilai width dan height (dalam pixel) dapat disesuaikan sesuai kebutuhan.

Ada masalah? kurang jelas? tenang, masih ada kotak komentar :D, selamat mencoba :)




Ardhiansyam | Find us on Google+ | Kontak | Follower? klik di sini | Sitemap | Versi Mobile | ke atas ↑