Penerapan Fancybox dengan JQuery di Blogger

Fancybox adalah efek jendela munculan (pop up) dengan menggunakan JQuery yang dikembangkan Janis Skarnelis. Berbeda dengan jendela munculan yang biasa kita lihat, Fancybox mempunyai desain elegan yang menyerupai pop up pada Mac OS serta efek transisi yang menarik. Selain dapat menampilkan gambar, Fancybox juga mampu menampikan halaman eksternal dengan Iframe. Lebih lanjut, silakan lihat mampir ke halaman demo.

Cara Penerapan

 

Pemasangan di template Blogger/blogspot

Langkah 1
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)

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>

Langkah 4
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)

<!-- 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() {
    $(&quot;a:has(img)&quot;).fancybox();
    $(&quot;a.image&quot;).fancybox();
    $(&quot;a.iframe&quot;).fancybox();
    $(&quot;a#inline&quot;).fancybox({
    &#39;hideOnContentClick&#39;: true
    });
    $(&quot;a.group&quot;).fancybox({
        &#39;speedIn&#39;    : &#39;600&#39;,
        &#39;speedOut&#39;    : &#39;200&#39;,
        &#39;overlayShow&#39;    : &#39;false&#39;
    });
    $(&quot;a.buzz&quot;).fancybox({
                    &#39;autoScale&#39;     : false,
                    &#39;transitionIn&#39;  : &#39;none&#39;,
                    &#39;transitionOut&#39; : &#39;none&#39;,
                    &#39;type&#39;          : &#39;iframe&#39;
            });
});
</script>
<!-- end Fancybox Costumized Js  -->

Langkah 6
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)

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 menambahkan jquery.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)

            $(&quot;.extLink&quot;).fancybox({
         &#39;width&#39; : &#39;35%&#39;,
         &#39;height&#39; : &#39;75%&#39;,
         &#39;autoScale&#39; : false,
         &#39;transitionIn&#39; : &#39;none&#39;,
         &#39;transitionOut&#39; : &#39;none&#39;,
         &#39;type&#39; : &#39;iframe&#39;
            });

Selanjutnya gunakan class="extLink" untuk melakukan pemanggilan (contoh dapat dilihat di halaman demo shoutmix)

Penutup
Untuk keterangan lebih lanjut silakan mampir ke Fancybox.net. Terima kasih, selamat mencoba, dan semoga bermanfaat

Ardhiansyam

Seorang penulis lepas yang tertarik dengan Blogger dengan berbagai seluk-beluknya

Blog: www.berandabumi.co.cc