How to Create Image Zoom Using Jquery FancyZoom
In the tutorial web design, we 'll create image zoom and displayed in center position when it clicked. All of UI we use Bootstrap as front-end and for animation of image zoom using jquery FancyZomm.
Here is the output we expected as shown by Figure.1 below :
Langkah-langkah membuat Image Zoom dengan Jquery FancyZoom
We asummed you have jquery fancyzoom , if not you can download in the link Download at the end of this tutorial.1. Prepare two different image as many as three
You should have two different images, one is small size as thumbnail and the last have big size as zoomed image when clicked..
2. Create file index.html
File index.html as main page to display your image as many as three and also display the animation of zoomed image when one of images is clicked.
So, the jquery fancyzoom both of fancyzoom.css or jquery.fancyzoom.js must be included in your file index.html. Notice the path both of them (fancyzoom.css and jquery.fancyzoom.js)
<link rel="stylesheet" href="assets/css/fancyzoom.css"/>You see, the path of fancyzoom locoted in folder assets/css/..., and for file jquery.fancyzoom.js located in assets/js/jquery.fancyzoom.js, so that the script to included this file as follow :
<script src="assets/js/jquery.fancyzoom.js"></script> Next step, we load the image :
<div class="thumbnail">
<a href="img/dashboard-big.png"><img src="img/dashboard-thumb.png" ></a>
</div>The image is put between tag <a></a>, where the first image displayed is dashboar-thumb.png. After the image clicked the dashboard-big.png will be displayed (as zoomed image).
There is one thing that you must give attention, never do the above script (load image) as follow:
<div class="thumbnail">
<a href="img/dashboard-big.png">
<img src="img/dashboard-thumb.png" >
</a>
</div>If we look at, there is no code added or modifie. It's only the position of tag img src below of tag a href. So, what's the problem ?.
Your intend only make above code more neat, but it caused the image zoom not work. Because in the file jquery.fancyzoom.js read space between tag img src and tag a href.
The last step, put this code in your filed index.html
<script>
$(document).ready(function() {
$("a").fancyZoom();
});
</script>Complete source code
Here of complete source code where the implementation of image zoom using Bootstrap as main interface. You can also download the complete source code in the link Download, it include library Bootstrap, ilmudetil.css, fancyzoom.css and jquery.fancyzoom.js.<!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>Load More Using Ajax </title>
<!-- Bagian css -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/ilmudetil.css">
<link rel="stylesheet" href="assets/css/fancyzoom.css"/>
</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:40px">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="img/code-big.jpg"><img src="img/code-thumb.jpg"></a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="img/agenda-big.png"><img src="img/agenda-thumb.png" ></a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="img/dashboard-big.png"><img src="img/dashboard-thumb.png" ></a>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="assets/js/jquery.fancyzoom.js"></script>
<script>
$(document).ready(function() {
$("a").fancyZoom();
});
</script>
<div class="navbar navbar-default navbar-fixed-bottom footer-bottom">
<div class="container text-center">
<p class="text-center">Copyright © 2016, DTC. Developed by <a href="https://ilmu-detil.blogspot.com/">Pusat Ilmu</a></p>
</div>
</div>
</body>
</html>