Cara Menggunakan Pop Up Jenis Magnific Dengan Plugins Jquery

Apa itu yang di maksud dengan Pop Up…??

Jika di artikan ke bahasa Indonesia yang artinya “muncul“, biasa nya pop di gunakan untuk sebuah gambar pada website. Paling sering di gunakan yaitu pada website e-commerce misalkan toko online dan market place lainnya. Pada artikel kali ini kita akan belajar Cara Menggunakan Pop Up Jenis Magnific Dengan Plugins Jquery, pop up gambar seperti ini kebanyakan di pakai pada website toko online seperti screen shoot di bawah ini yang saya ambil di salah satu website toko online.

Bisa teman – teman lihat pada gambar di atas ini di sebelah kiri atas terdapat kotak kecil, itu berfungsi sebagai pilihan gambar dan jika di klik salah satu gambar maka akan muncul di kotak yang tengah jika cursor di arahkan pada gambar yang ada di kotak tengah maka gambar akan muncul atau di pop up dengan ukurannya lebih besar. Ini berfungsi untuk melihat gambar lebih detail pada gambar, biasanya ini banyak di temui pada website jual beli barang second yang mana image sangat 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 biasa 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 juga, saya disini membuat folder dengan nama

Jika sudah, teman – teman download plugins jquery nya atau bisa klik di link ini kemudian extract pada satu folder maka akan menghasilkan seperti gambar di bawah ini

Untuk image nya teman – teman buat satu folder lagi dengan nama images untuk menaruh ketiga ukuran gambar yang tadi kita pisahkan, seperti gambar di atas ini saya memberikan juga folder images dan di dalam 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="The description goes here"></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="The description goes here"></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="The description goes here"></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="The description goes here"></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 dalam 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>

Jika sudah, save dan jalankan pada browser nya. Maka hasilnya seperti gambar di bawah ini

Bagaimana..??

Kurang lebih sama dengan contoh yang saya screen shoot pada website toko online jika cursor di arahkan pada kotak maka gambar akan di pop up dan juga bisa di besar kecilkan dengan scroll mouse, oia untuk image nya teman – teman panggilnya sesuai nama dan folder ya seperti gambar di bawah ini

Baik, sekian dulu pada artikel kali ini tentang Cara Menggunakan Pop Up Jenis Magnific Dengan Plugins Jquery. Kita jumpa lagi di lain kesempatan, semoga bermanfaat dan memberikan inspirasi untuk membuat layout website yang menarik.

Sampai Jumpa dan Terima Kasih.

Cara Menggunakan Pop Up Jenis Magnific Dengan Plugins Jquery

Kategori