Baik di Pagi yang cerah ini saya akan membagikan 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.
Itulah kurang lebihnya untuk penjelasan tentang PrettyPhoto, baik selanjutnya kita langsung ke TKP.
Pertama seperti biasa Sobat" pergi ke Blogger Dasbor dan langsung ke halaman HTML.
Selanjutnya cari kode </head> (gunakan Ctrl + F untuk memudahkan pencarian.), kalau sudah ketemu, letakkan kode berikut di atasnya.
<link href='http://dl.dropbox.com/u/18548998/Javascript/facebook.css' media='screen' rel='stylesheet' type='text/css'/>
Keterangan kode di atas (tidak berlaku untuk kode di bawah):
<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(){ $("a[rel^='prettyPhoto']").prettyPhoto({
theme: 'facebook', /* light_rounded / dark_rounded / light_square / dark_square / facebook */
});
});
</script>
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 Sobat. Sampai disini pemasangan PrettiPhoto di template blogger sudah beres, selanjutnya adalah memanggil efek prettyPhoto dengan sedikit modifikasi kode.
Untuk memasang prettyPhoto pada satu gambar saja
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCE0Axxwz4vdhQzPDo2me7tHFDIg_LyPdGruPy2Yigw4KwFrqR03KHLtQr80-KVQMJdRzoQoqPp5qemd20k5OV7pYV7plhKtjGNI-2F7XaYEndP6g4RbnAfzpRVXtOHMdgVcsPRYGu81Yk/" rel="prettyPhoto" title="Patung"><img alt="Judul gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTnAWu7BAW-klEGxjm2ObT2r9AQ4cFJhm_LFZO9n4I00pn8yIMSHIDJXAgJFTYET1NigS9F1IegZEKLhOW7fpl76i0GUkh3KLevdPIL6UcJuqqwevb82CUZ4GDHW8y-Bk8muEM9DpFNM26/s320/tr-wp2.jpg" /></a>
Untuk memasang prettyPhoto pada kelompok gambar (group)
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ2JCcXw2kDE1u2uw7ugw3Q2pbI-CNSNrMPnaSURN2Fb1UdIqyKNXaDW9w5me4WYWIj0SOvfw-ZjJW1ua2-iODBMJp6GJVDE9nCwNjo13hv0DF6r7scbo9R98eyFWGjCAVpTZrnl0r3WCP/" rel="prettyPhoto[gallery]"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNnI2jgXqjtgD33eyMY_F5gsIeRTYg31VSJ6HzZhtlIEQSt0N7W4bOcBj_qYVbyUB0Fg7WixiHtOApakaBPnLAeOHv97pBFwxiJIhk6KJ2gjc7o8L_M4AlpWi1nEITMfBl67_NESb-lObs/s320/tr-wp3.jpg" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT7jsDsdPs7xhSM0VPgvOmGUd2s1wNUrGzXyN5GZS5V9Gpb1d1aoJwdFuICSmMDAKGEwP8OYs0R3L7OKjipp5zwrlESIYZ6OynJPQsAfs2UjHyKfcYJ-3PDVUFQrXs4kZVRFgxchyphenhyphenSrgti/" rel="prettyPhoto[gallery]" title="Gerbang"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYCm-ottTrTkr9bR0iSSc3Nq0tlCGTrMcVlLSPhvbhFkLxADzDwHmUnK5s78WfEfBL0-PGDTU9tVHZn1fS2D0ySFL8Af4tLx2YL7IxYOm-SdzLQyhWH2PmKFUuM_h1XZlPsGZY_vBNyTiI/s320/tr-wp4.jpg" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHGfQDD10oG2wMYgozJZ56M4GT-Mu3JDxW28vSmhrP-pGvTV9TGKeR1iIQVjjBbsmYkNWSgXxAWk6dI9GXIhWY-4uco4n1BktYS1dDluHwcT_xX8J8hQc_uPGwsitniA_DHMp77fY2HLOJ/" rel="prettyPhoto[gallery]" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQCBOuVSmMfBcXD2SDjeVh4Yl219cZaKPZtO5-3XZ9scxzFjZxYssQp9UBHc8v7bnkuhK5d6y5OV9RVGniKaqHnzKJOPpVPdjHvI0hOdB7XXLpHDLleio7xbQ-U_x05MU1t6w02SxDnGay/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.
KeteranganUntuk 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 video YouTube dengan prettyPhoto#
<a href="http://www.youtube.com/watch?v=hTMrlHHVx8A?width=640&height=360" rel="prettyPhoto" title="Kings and Queens - 30 Seconds To Mars"><img alt="YouTube" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEAen01C9DaZXxSWh7374wrrh3i3BBWvdmSRg4izED1Wkf8VX2HccybfRA6Oq4gFbJf8NrRwV_A6nSuOjo_BJFYgg7JCyB5WorOXYglh3UlgvWVD0qO6lcHUTfaxh4L6rhI6Zi6v3Gh_k/s320/king_&_queen.jpg" /></a>
Untuk memasang video QuickTime dengan prettyPhoto#
<a href="http://trailers.apple.com/movies/universal/despicableme/despicableme-tlr1_r640s.mov?width=640&height=360" rel="prettyPhoto" title="Despicable Me"><img alt="QuickTime" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnNtQq0fjN3zkoown9N1TNVEjQsUMOL1JbGVuzkrtPmAFrfZeOyXzAFlOcRN4NZJIUb2kpoQEh02EZd16IUPn2nTYzQo4ZlGG6FKBbpZtw_zW3myRj7Y63-LuLQzekNDY91QpI4b8XNuA/s320/quicktime.jpg" /></a>
Mungkin hanya itu untuk Tutorial kali ini, mudah"an lain nanti kita bisa bagi" lagi. Semoga bermanfaat.
Sumber : http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
