Contoh Jquery Image Gallery Zoom Plugin
Sekarang kita akan membahas bagaimana cara memberi efek image zoom, namun dalam bentuk galeri.
Dalam contoh ini, kita masih menggunakan plugin jquery elevateZoom.js dalam pemberian efek zoomnya. Akan tetapi penyajian imagenya dalam bentuk galeri (kumpulan gambar-gambar).
Untuk kumpulan gambar (galeri), kita akan membuatnya dalam bentuk id, seperti :
<div id="gal1"> <a href="#" data-image="img/small/image1.png" data-zoom-image="img/large/image1.jpg"> <img id="zoom_03" src="img/thumb/image1.jpg" /> </a> <a href="#" data-image="img/small/image2.png" data-zoom-image="img/large/image2.jpg"> <img id="zoom_03" src="img/thumb/image2.jpg" /> </a> <a href="#" data-image="img/small/image3.png" data-zoom-image="img/large/image3.jpg"> <img id="zoom_03" src="img/thumb/image3.jpg" /> </a> <a href="#" data-image="img/small/image4.png" data-zoom-image="img/large/image4.jpg"> <img id="zoom_03" src="img/thumb/image4.jpg" /> </a> </div>Perhatikan <div id="gal1">, gal1 merupakan id dimana tempat beradanya beberapa image (image1, image2, image3, image4). Untuk gal1, tentunya harus didefinisikan terlebih dahulu dalam bentuk css. Dan nantinya gal1 ini akan kita lakukan pemanggilan untuk pemberian efek zoom pada bagian jquery.
Untuk pemberian efek zoom pada image galeri, kode jquerynya :
<script> $("#zoom_03").elevateZoom({gallery:'gal1', cursor: 'pointer', zoomType: 'inner', galleryActiveClass: 'active', imageCrossfade: true}); </script>
Kode Lengkap Efek Image Gallery Zoom
Berikut ini adalah ouput yang akan kita buat, seperti yang ditunjukkan oleh Gambar.1 dibawah ini: |
| Gambar.1 |
Kode lengkapnya untuk file index.html :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="author" content="ilmu-detil.blogspot.com"> <title>Image Zoom</title> <!-- Bagian css --> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/ilmudetil.css"> <!-- Bagian js --> <script src='assets/js/jquery-1.10.1.min.js'></script> <script src="assets/js/jquery.elevatezoom.js"></script> <script src="assets/js/bootstrap.min.js"></script> <style type=text/css> #gal1 img{ position:relative; display: inline; } .active img{border:0px solid #333 !important;} </style> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html"> Pusat Ilmu Secara Detil</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-left"> <li class="clr1 active"><a href="index.html">Home</a></li> <li class="clr2"><a href="">Programming</a></li> <li class="clr3"><a href="">English</a></li> </ul> </div> </div> </nav> </br></br></br></br> <!--- Bagian Judul--> <div class="container" style="margin-top:30px"> <h2>Bootstrap Image Gallery Zoom</h2> <div class="row"> <div class="col-md-5"> <div class="thumbnail"> <img id="zoom_03" src="img/small/image1.png" data-zoom-image="img/large/image1.jpg"> <div id="gal1"> <a href="#" data-image="img/small/image1.png" data-zoom-image="img/large/image1.jpg"> <img id="zoom_03" src="img/thumb/image1.jpg" /> </a> <a href="#" data-image="img/small/image2.png" data-zoom-image="img/large/image2.jpg"> <img id="zoom_03" src="img/thumb/image2.jpg" /> </a> <a href="#" data-image="img/small/image3.png" data-zoom-image="img/large/image3.jpg"> <img id="zoom_03" src="img/thumb/image3.jpg" /> </a> <a href="#" data-image="img/small/image4.png" data-zoom-image="img/large/image4.jpg"> <img id="zoom_03" src="img/thumb/image4.jpg" /> </a> </div> </div> </div> <script> $("#zoom_03").elevateZoom({gallery:'gal1', cursor: 'pointer', zoomType: 'inner', galleryActiveClass: 'active', imageCrossfade: true}); </script> </div> </div> </body> </html>
