This section contains the detail about the Zooming Images of ImageSlider with Fancy Box & Zoom Plug-in
Zoom Images of ImageSlider with Fancy Box & Zoom Plug-in
In this section, you will learn how to zoom Image Slider 's Images inside a Fancy Box using Image Slider, Fancy Box & zoom plug-in with PHP.
First, we implement ImageSlider plug-in for creating image slider of these images.
Second, we implement Fancybox plug-in for opening the current image in a Fancy Box for zooming image. The Fancy box implementation is due to Fancy box plug-in. The Fancy Box opens a iframe which contain a PHP page.
We set each image with a <a href> tag , in which we set the URL for URl rewriting as :
<li><a id="exampleb1" href="imagehandler.php?Url1=images/image1_big.jpg &Url2=images/image1_l.jpg"> <img src="images/image1_big.jpg" border=0 alt="Css Template Preview" /></a></li>
The main function of PHP is to fetch the clicked image name using $_GET method. The clicked image url is send due to URL rewriting.
After fetching the clicked image URL , it will be displayed on a new PHP page which opened inside a Fancy Box.
The third and final thing is to implement zoom plug-in to zoom the image section. You can zoom any image section by using this plug-in.
The code & output is given below :
Example :
ImageSliderWithFancyBoxZoom.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Easy Slider jQuery Plugin Demo</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.1.css"
media="screen" />
<script type="text/javascript">
$(document).ready(function(){
//for image slider
$("#slider").easySlider({
auto: true,
continuous: true
});
//for fancy box
$("a#exampleb1").fancybox({
'titleShow' : false,
'width' : '70%',
'height' : '90%',
'autoScale' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'type' : 'iframe'
});
});
</script>
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<div id="header">
<h2>Easy Slider Plugin + Fancy box plugin + Zoom Plugin of jQuery</h2>
</div>
<div id="slider">
<ul>
<li><a id="exampleb1"
href="imagehandler.php?Url1=images/image1_big.jpg&Url2=images/image1_l.jpg">
<img src="images/image1_big.jpg" border=0 alt="Css Template Preview" /></a></li>
<li><a id="exampleb1"
href="imagehandler.php?Url1=images/image2_big.jpg&Url2=images/image2_l.jpg">
<img src="images/image2_big.jpg" border=0 alt="Css Template Preview" /></a></li>
<li><a id="exampleb1"
href="imagehandler.php?Url1=images/image3_big.jpg&Url2=images/image3_l.jpg">
<img src="images/image3_big.jpg" border=0 alt="Css Template Preview" /></li>
</ul>
</div></div>
</body>
</html>
imagehandler.php
<?php
$ImageSmall=$_GET['Url1'];
#echo($ImageSmall);
$ImageBig=$_GET['Url2'];
#echo($ImageBig);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Image Magnifier</title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/zoom.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".image").jqueryzoom({
xzoom: 150,
yzoom: 150
});
});
</script>
<link rel="stylesheet" href="css/zoom.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper" >
<br><br><br>
<p><h3><i><font color="red">Magnify product's part by mouse hover</font></i></h3></p>
<div>
<div class="image">
<img src="<?php echo($ImageSmall); ?>" alt="Please wait.." jqimg="<?php echo($ImageBig); ?>">
</div>
</div>
</div>
</body>
</html>
Output :
On first screen, you will see a slider for image as follows :
When you click on any image it will open the PHP file in a Fancy Box as follows :
[ 0 ] Comments