Halo guys selamat datang kembali :) Maaf artikelnya telat, Harusnya part 2 ini uploudnya kemarin malam, berhubung kemarin malam udah capek jadi diuploudnya baru sekarang.

Nah, Jadi di part 2 ini kita akan membahas tetang FancyBox. Berikut adalah penjelasan tentang FancyBox. FancyBox adalah plugin untuk menampilkan gambar, konten html dan multi-media yang mengapung di atas halaman web. daripada teman-teman bingung mending langsung liat contohnya dibawah ini.

Untuk melihat hasilnya silahkan klik pada gambarnya
Apabila teman teman menggunakan Chrome hp silahkan rubah dulu ke Situs Desktop
Caranya tekan tombol yang ada dipojok kanan atas kemudian centang Situs Desktop



Gimana? Menarik bukan? Nah bagaimana caranya? Caranya hampir sama seperti di part 1 kemarin. Siapkan beberapa gambar untuk ditampilkan

1. Buat widget khusus buat javascript caranya Tambahkan Widget > HTML/Javascript
2. Kemudian copy code dibawah ini

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

<script >
     $("a.grouped_elements".fancybox();
</script>

3. Kemudian paste di widget tadi
4. Langkah selanjutnya adalah memasukan gambarnya caranya Masuk ke menu postingan
5. Kemudian buat postingan baru
6. Nah seperti biasa buatlah artikel kemudian selipkan gambar
    (Catatan : Gambar harus mempunyai kelas yang sama dengan scriptnya)
7. Langkah berikutnya teman-teman lihat di pojok kiri atas ada pilhan Compose dan HTML, teman-teman tinggal tekan menu HTML kemudian paste kode dibawah ini

<a class="grouped_elements" href="https://i.imgur.com/Wxlz6NWg.jpg" rel="group1"><img alt="" src="https://i.imgur.com/Wxlz6NWg.jpg" /></a>
<a class="grouped_elements" href="https://i.imgur.com/lrzrjO4.jpg" rel="group1"><img alt="" src="https://i.imgur.com/lrzrjO4.jpg" /></a>  

<a class="grouped_elements" href="https://i.imgur.com/1QxMvUH.jpg" rel="group2"><img alt="" src="https://i.imgur.com/1QxMvUH.jpg" /></a> 

<a class="grouped_elements" href="https://i.imgur.com/9fZGoDH.jpg" rel="group2"><img alt="" src="https://i.imgur.com/9fZGoDH.jpg" /></a> 

( Catatan : https://i.imgur.com adalah link gambar saya, jadi teman-teman bisa ganti sesuka hati, Html diatas adalah cara untuk membuat gallery seperti yang saya contohkan jadi meskipun teman-teman tidak mengcopynya juga tidak masalah)

8. Selesai

Apabila teman-teman kebingungan silahkan kunjungi website resmi dari FancyBox nya Disini.

Untuk postingan hari ini saya akhiri sampai disini dulu untuk part 3 nya akan segera diupload, Apabila ada salah kata mohon dimaafkan. yang mau tanya-tanya, kritik, saran silahkan tulis dikolom komentar.

Jangan lupa support saya dengan cara ikuti saya di google+ atau di sosial media saya yang lainnya dan jangan lupa untuk membagikan postingan ini  kepada teman-teman kalian, Sekian Terima Kasih.