Cara Menggunakan Pop Up Jenis Magnific Dengan Plugins Jquery
Apa itu yang di maksud dengan Pop Up…??
Apabila di artikan ke bahasa Indonesia yang artinya “muncul“, biasanya nya pop di gunakan bagi sebuah gambar di blog. Sangat sering di gunakan yaitu di blog e-commerce misalkan toko online dan market place lainnya. Di artikel kali ini kita akan belajar Cara Menggunakan Pop Up Jenis Magnific Dengan Plugins Jquery, pop up gambar seperti ini kebanyakan di gunakan di blog toko online seperti screen shoot di bawah ini yang saya ambil di diantara blog toko online.
Dapat teman – teman lihat di gambar di atas ini di sebelah kiri atas terdapat kotak kecil, itu berfungsi selaku alternatif gambar dan kalau di klik diantara gambar karenanya akan muncul di kotak yang tengah kalau cursor di arahkan di gambar yang terdapat di kotak tengah karenanya gambar akan muncul atau di pop up dengan ukurannya lebih besar. Ini berfungsi bagi melihat gambar lebih detail di gambar, biasanya ini banyak di temui di blog jual beli barang second yang mana image benar-benar menentukan kualitas barang yang akan di jual apakah ada cacat atau tidaknya. Oke mari kita praktekkan Cara Menggunakan Pop Up Jenis Magnific Dengan Plugins Jquery seperti biasanya teman – teman siapkan text editornya dan image dengan tiga ukuran yaitu 80 x 80 cm, 400 x 400cm dan 1024 x 1024cm dengan gambar yang sama dan simpan di tiga folder pun, saya disini merancang folder dengan nama
Apabila telah, teman – teman unduh plugins jquery nya atau dapat klik di link ini kemudian extract di satu folder karenanya akan menghasilkan seperti gambar di bawah ini
Bagi image nya teman – teman bikin satu folder lagi dengan nama images bagi menaruh ketiga ukuran gambar yang tadi kita pisahkan, seperti gambar di atas ini saya memberikan pun folder images dan di pada nya terdapat tiga folder yang berisi image yang sama namun berbeda – beda ukurannya.
Langkah berikutnya teman – teman copy script html nya di bawah ini
<!doctype html>
<html class=no-js lang=en>
<head>
<meta charset=utf-8 />
<meta name=viewport content=width=device-width, initial-scale=1.0 />
<title>Cara Menggunakan Pop Up Jenis Magnific Dengan Plugins Jquery</title>
</head>
<body>
<div class=container>
<div class=row>
<!-- magnific start -->
<section id=magnific>
<div class=row>
<div class=large-12 column><h3>Jenis Pop-up Magnific </h3></div>
<div class=large-5 column>
<div class=xzoom-container>
<img class=xzoom5 id=xzoom-magnific src=images/gallery/preview/01_b_car.jpg xoriginal=images/gallery/original/01_b_car.jpg />
<div class=xzoom-thumbs>
<a href=images/gallery/original/01_b_car.jpg><br><img class=xzoom-gallery5 width=80 src=images/gallery/thumbs/01_b_car.jpg xpreview=images/gallery/preview/01_b_car.jpg title=Cara Menggunakan Pop Up Jenis Magnific Dengan Plugins Jquery></a>
<a href=images/gallery/original/02_o_car.jpg><img class=xzoom-gallery5 width=80 src=images/gallery/preview/02_o_car.jpg title=Cara Menggunakan Pop Up Jenis Magnific Dengan Plugins Jquery></a>
<a href=images/gallery/original/03_r_car.jpg><img class=xzoom-gallery5 width=80 src=images/gallery/preview/03_r_car.jpg title=Cara Menggunakan Pop Up Jenis Magnific Dengan Plugins Jquery></a>
<a href=images/gallery/original/04_g_car.jpg><img class=xzoom-gallery5 width=80 src=images/gallery/preview/04_g_car.jpg title=Cara Menggunakan Pop Up Jenis Magnific Dengan Plugins Jquery></a>
</div>
</div>
</div>
<div class=large-7 column></div>
</div>
</section>
</div>
</body>
</html>
Kemudian save dengan index.html, berikutnya kita tinggal load link – link plugins jquery nya seperti script di bawah ini
<link rel=stylesheet href=css/normalize.css />
<link rel=stylesheet href=css/foundation.css />
<link rel=stylesheet href=css/demo.css />
<script src=js/vendor/modernizr.js></script>
<script src=js/vendor/jquery.js></script>
<!-- xzoom plugin here -->
<script type=text/javascript src=dist/xzoom.min.js></script>
<link rel=stylesheet type=text/css href=css/xzoom.css media=all />
<!-- hammer plugin here -->
<script type=text/javascript src=hammer.js/1.0.5/jquery.hammer.min.js></script>
<!--[if lt IE 9]><script src=http://html5shiv.googlecode.com/svn/trunk/html5.js></script><![endif]-->
<link type=text/css rel=stylesheet media=all href=fancybox/source/jquery.fancybox.css />
<link type=text/css rel=stylesheet media=all href=magnific-popup/css/magnific-popup.css />
<script type=text/javascript src=fancybox/source/jquery.fancybox.js></script>
<script type=text/javascript src=magnific-popup/js/magnific-popup.js></script>
Isikan link di atas ini di pada tag <head>
Kemudian kita load lagi 2 link lagi seperti di bawah ini
<script src=js/foundation.min.js></script>
<script src=js/setup.js></script>
Isikan tepat di atas tag tutup </body>
Apabila telah, save dan jalankan di browser nya. Karenanya hasilnya seperti gambar di bawah ini
Bagaimana..??
Kurang lebih sama dengan contoh yang saya screen shoot di blog toko online kalau cursor di arahkan di kotak karenanya gambar akan di pop up dan pun dapat di besar kecilkan dengan scroll mouse, oia bagi image nya teman – teman panggilnya sesuai nama dan folder ya seperti gambar di bawah ini
Bagus, demikian dulu di artikel kali ini mengenai Cara Menggunakan Pop Up Jenis Magnific Dengan Plugins Jquery. Kita jumpa lagi di lain kesempatan, semoga bermanfaat dan memberikan inspirasi bagi merancang layout blog yang menarik.
Hingga Jumpa dan Terima Kasih.
Sumber https://kursuswebsite.org
