Fancybox JQuery Di Blogspot
Cara Penerapan
Pemasangan di template Blogger/blogspot
Langkah 1
Unduh (download) kode yang telah dikustomisasi di sini
Unduh (download) kode yang telah dikustomisasi di sini
Isi file:
1. jquery.fancybox-1.3.1.css 2. jquery.fancybox-1.3.1.js
3. jquery.mousewheel-3.0.2.pack.js (opsional)
1. jquery.fancybox-1.3.1.css 2. jquery.fancybox-1.3.1.js
3. jquery.mousewheel-3.0.2.pack.js (opsional)
Unggah (upload) file jquery.fancybox-1.3.1.js dan jquery.mousewheel-3.0.2.pack.js (opsional) ke hostingan Anda (saya menggunakan Fileave.com untuk menitipkan file js).
Langkah 2 Buka file jquery.fancybox-1.3.1.css dengan notepad, copy semua kode di dalamnya
Langkah 3
Backup template Anda, lalu tuju halaman Edit HTML, paste kode pada Langkah 2 di atas ]]></b:skin>
Backup template Anda, lalu tuju halaman Edit HTML, paste kode pada Langkah 2 di atas ]]></b:skin>
Langkah 4
Tempatkan kode JQuery berikut di atas </head> (bila belum ada)
Tempatkan kode JQuery berikut di atas </head> (bila belum ada)
<!-- jQuery -->
<script src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'/>Langkah 5
Selanjutnya tempatkan kode berikut setelah kode JQuery tersebut (ganti http://hostingan-anda.com/jquery.fancybox-1.3.1.js dengan alamat hostingan file Anda)
Selanjutnya tempatkan kode berikut setelah kode JQuery tersebut (ganti http://hostingan-anda.com/jquery.fancybox-1.3.1.js dengan alamat hostingan file Anda)
<!-- Fancybox Costumized Js -->
<script src='http://hostingan-anda.com/jquery.fancybox-1.3.1.js' type='text/javascript'/><!-- Js Tambahan -->
<script type='text/javascript'>
$(document).ready(function() {
$("a:has(img)").fancybox();
$("a.image").fancybox();
$("a.iframe").fancybox();
$("a#inline").fancybox({
'hideOnContentClick': true
});
$("a.group").fancybox({
'speedIn' : '600',
'speedOut' : '200',
'overlayShow' : 'false'
});
$("a.buzz").fancybox({
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
<!-- end Fancybox Costumized Js -->Langkah 6
Simpan template Anda
Simpan template Anda
Penerapan
Sampai di sini proses pemasangan Fancybox di template Blogger Anda telah selesai. Langkah selanjutnya adalah penerapan efek Fancybox pada objek yang Anda inginkan di postingan, maupun elemen halaman blog Anda (Single Image, Image Gallery, Iframe dan konten Inline)
Sampai di sini proses pemasangan Fancybox di template Blogger Anda telah selesai. Langkah selanjutnya adalah penerapan efek Fancybox pada objek yang Anda inginkan di postingan, maupun elemen halaman blog Anda (Single Image, Image Gallery, Iframe dan konten Inline)
1. Single Image
<a class="single_image" href="http://gambar-anda.jpg"><img src="gambar-thumbnail-anda.jpg" alt="keterangan-gambar"/></a>2. Image Gallery
<a class="grouped_elements" href="http://gambar1-anda.jpg"><img src="gambar-thumbnail1-anda.jpg" alt="keterangan-gambar 1"/></a><a class="grouped_elements" href="http://gambar2-anda.jpg"><img src="gambar-thumbnail2-anda.jpg" alt="keterangan-gambar 2"/></a>3. Iframe
<a class="iframe" href="http://www.google.com" title="keterangan-iframe">Contoh Iframe Google.com</a>4. Konten Inline
<a id="inline" href="#data">Menampilkan konten dari elemen dengan id="data"</a><div style="display:none"><div id="data">Kata-kata (objek inline) yang muncul di pop up</div></div>Opsi Tambahan
1. Anda dapat mengaktifkan mouse weel sebagai navigasi untuk Image Gallery dengan menambahkanjquery.mousewheel-3.0.2.pack setelah penempatan kode jquery.fancybox-1.3.1.js. Untuk melihat efeknya silakan lihat halaman demo bagian Image Gallery dan gunakan mouse weel Anda.
2. Untuk menampilkan Iframe dengan skala tertentu, Anda dapat menambahkan kode berikut di deretan <-- Js Tambahan --> (ubah angka 35 untuk lebar dan 75 untuk tinggi sesuai kebutuhan)
$(".extLink").fancybox({
'width' : '35%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
'width' : '35%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
Selanjutnya gunakan class="extLink" untuk melakukan pemanggilan (contoh dapat dilihat di halaman demo shoutmix)
sumber : kolok-tutorial.blogspot.com
sumber : kolok-tutorial.blogspot.com
