Menambahkan Fitur Zoom pada jQuery Fancybox

Assalamualaikum para pengunjung dan pembaca, berhubung penulisan tutorial ini pada hari jumat jadi ogud akan bertutur kata sedikit sesuai dengan EYD, oh ia. Sebelumnya saya mengucapkan berbelasungkawa atas meninggalnya UJE (Ustad Jeffry Al Buchori) panutan umat islam, semoga beliau diberkan tempat paling baik di sisi Allah SWT.

Okay, kita lanjut ke inti masalah. Minggu kemarin ogud diminta untuk membuat gallery di salahsatu situs klien ogud, nah.. masalahnya klien saya itu minta kalau ketika image di gallery diklik bisa menampilkan image itu menjadi lebih besar dan memakai light box, dalam benak ogud langsung kepikiran “ohhh, gampang lah, tinggal pake fancybox”. Nah, siang harinya saya dibrief terus malam harinya ogud kerjain tuh, dan pagi harinya ogud kabarin kalau gallerynya sudah bisa diakses dan mohon untuk dicoba. Udah lega tuh ogud karena satu project selesai dalam satu malam😀

Ogud setia tuh nungguin email balesan dari klien ogud itu dan.. pagi di kabarin sore baru dibalas, hal itu yang biasa terjadi pada dunia perfreelance-an (ribet ngomongnya), ya begitulah, “KLIEN ADALAH RAJA” tetep aja kalo deadline mundur ogud yang kena semprot. Padahal dari pihak merekanya yang lama nanggepinnya. Hahah jadi curcol begini ogud.

Eh udah lama nunggu isi emailnya malah begini “wah, tampilannya bagus pa, saya suka popupnya (maksudnya light box kali) tapi bos saya kepinginnya pas keadaan popup bisa di zoom lagi gambarnya” gubrakkkk.. itu rasanya kaya digendong terus abis itu dilemparin. Haha, ogud langsung cari deh plugin jQuery buat zooming secara kan di fancybox ga ada fitur zoom-zooman kaya gitu. Tapi ogud langsung dapet sih plugin yang sesuai dengan gambaran ogud yang bisa nyambung dan pas kalo dibarengin ama fancybox, namanya ddzommer, jadi itu simpel banget, ga perlu css tambahan dan cuma satu file javascript doang bisa langsung running. Nah sesi curhatnya kayanya ampe sini aja kita masuk ke sesi step.

Sebelumnya download fancybox disini dan ddpowerzoomer disini

“Ini dalam kondisi, sudah include semua file yang dibutuhkan, seperti fancybox css, fancybox js, ddpowerzoom js”

jQuery(document).ready(function(){
   jQuery(".fancy").fancybox({
      onComplete : function() {
         jQuery('#fancybox-img').addpowerzoom({magnifiersize:[150,150]});
      }
   });
});

Untuk file lengkapnya silahkan download disini.

Nah beres deh kita bikin lightbox beserta zoom didalamnya. Seperti biasanya di akhir kata saya ucapkan semoga tutorial ini bermanfaat dan jangan lupa kasi feedbacknya supaya bisa share libih baik lagi kedepannya. Aminnn

2 thoughts on “Menambahkan Fitur Zoom pada jQuery Fancybox

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s