PDA

View Full Version : jquery image enlarge using fancybox



nileshpatil
04-19-2014, 12:48 PM
hello.... i need help for the image enlarge on mouse click..
i follow the code from this site----> http://jsfiddle.net/jRsjK/
and i edit that code like this-->


<html>
<head>
<title>Mayur Steels - Products</title>


<!-- FancyBox -->
<script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.css"></script>
<script type="text/javascript">
$(".fancybox").fancybox({
helpers : {
overlay : {
css : {
'background' : 'rgba(58, 42, 45, 0.95)'
}
}
}
});
</script>
</head>
<body >


<a rel="gallery" class="fancybox" href="images/mayur1.jpg" >
<img src="images/gallery/bed1.jpg" /></a>


</body>
</html>


but the code is not working here...

jscheuer1
04-19-2014, 02:33 PM
Assuming the fancy box script and css files are where you say they are, as well as the images:


<!DOCTYPE html>
<html>
<head>
<title>Mayur Steels - Products</title>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<!-- FancyBox -->
<link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css">
<script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
<script type="text/javascript">
$(".fancybox").fancybox({
helpers : {
overlay : {
css : {
'background' : 'rgba(58, 42, 45, 0.95)'
}
}
}
});
</script>
</head>
<body >


<a rel="gallery" class="fancybox" href="images/mayur1.jpg" >
<img src="images/gallery/bed1.jpg" /></a>


</body>
</html>

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.