Cara Memasang FancyBox pada Blogspot

FancyBox adalah salah satu alternatif LightBox yang sering digunakan untuk menampilkan gambar dengan cara lebih cantik dan menarik. Sebenarnya platform Blogger memiliki lightbox bawaan yang bisa dibilang cukup menarik. Tetapi entah kenapa, Lightbox bawaan Blogger ini tidak bisa bekerja pada template yang saya gunakan.

Karena tidak memiliki Lightbox, blog zdienos agak kurang menarik jika saat kita mengklik gambar, lantas yang terbuka adalah URL dari gambar tersebut, dan harus menekan tombol back untuk kembali membaca artikel. Olehnya itu, saya akan coba tunjukkan bagaimana cara memasang FancyBox pada blogspot, sekalian diterapkan pada blog zdienos.

Disable LightBox Bawaan Blogspot

Sebelum memulai, ada baiknya (atau mungkin sebaiknya) kita men-disable Lightbox bawaan blogspot, biar gak bentrok nantinya. Untuk men-disable lightbox cukup mudah, buka dashboard Blogger Anda tentunya, kemudian pilih Setting -> Post, comments and sharing. Pada bagian showcase image with Lightbox, pilih No.

Memasang Script FancyBox

Script FancyBox yang saya gunakan pada tutorial ini adalah masih versi 3.1.25, sedangkan pada situs resmi, sudah versi 3.5.7. Tentunya pada versi terbaru ini sudah banyak fitur-fitur yang telah dikembangkan .Silahkan merujuk ke dokumentasi FancyBox pada situs resmi untuk penggunaan FancyBox lebih lanjut (http://fancyapps.com/fancybox/3/).

Oke, saatnya memasang script FancyBox, kembali ke dashboard blogger, pilih theme lalu edit theme. Silahkan copy dan paste script style css di bawah ini, tepat di atas tag penutup HEAD.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<!-- FancyBox CSS -->
<link href='http://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.css' rel='stylesheet' type='text/css'/>
</b:if>

Ada sedikit modifikasi dari saya, yakni dengan menambahkan conditional if, dimana script css tersebut hanya akan diloading, jika yang dibuka adalah bukan halaman utama blog. Tips ini akan sedikit mengurangi beban blog saat loading tentunya.

Selanjutnya silahakan copy dan paste script utama FancyBox di bawah ini, dan letakkan tepat di atas tag penutup BODY.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<!-- jQuery -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'/>

<!-- FancyBox 3 -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.js'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$(".post-body a img").each(function(){
var isImage = /\.(?:jpg|jpeg|gif|png)$/i.test( $(this).parent("a").attr("href") );
if ( isImage ) {
$(this).parent("a").attr('data-src', $(this).parent("a").attr("href"));
$(this).parent("a").attr('data-fancybox', 'fancy-box' );
}
else {
}
});
$("[data-fancybox]").fancybox({
infobar : true,
arrows : false,
animationEffect : "fade",
transitionEffect : "slide",
speed : 300,
margin : [40, 20]
});
});
//]]>
</script>
</b:if>

Sama seperti script Stylesheet CSS sebelumnya, script utama ini saya tambahkan conditional if, sehingga hanya akan diload jika yang diakses adalah bukan halaman utama. Di script ini juga bisa dilakukan kustomisasi seperti efek animasi, transisi dan sebagainya. Silahkan baca dokumentasi pada situs resmi FancyBox. Jangan lupa simpan perubahan yang telah dilakukan pada template blogspot.

Selesai

Jika tidak ada kesalahan, harusnya FancyBox sudah berjalan dengan baik pada blogspot. Silahkan buka salah satu postingan yang memiliki gambar. Kemudian klik gambar tersebut. Kira-kira begini penampakan FancyBox tadi.

Hasilnya sangat bagus menurut saya, bahkan ada fitur fullscreen, slideshow dan show thumbnailnya. Mudah-mudahan dengan penambahan script FancyBox, pengunjung blog bisa lebih betah.

Sekian saja postingan kali ini, jangan lupa komentar, like dan follow/subscribe sosial media blog zdienos.

Terima kasih,
(z)