I am a beginner so please bear with me.
I am using jquery.elevatezoom.js to zoom on images.
It is working fine, but the problem is when I name this file say showimage.php in my dashboard.php using PHP's include function, the jquery function defined in showimage.php is not executing, thus I am not getting the zoom.
I have a dashboard. When I click on a button, it is bound to a JavaScript function that loads the page in the dashboard, and the page getting loaded is a PHP file that includes showimage.php.
Jquery.min is called at the dashboard's load event.
The dashboard has a button that when clicked loads a php file that first loads showimage.php using php's include function.
Here is the code for showimage.php:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>jQuery elevateZoom Demo</title>
<script src='jquery.elevatezoom.js'></script>
</head>
<body>
<h1>Basic Zoom Example</h1>
<img id="zoom_01" src='images/large/image1.jpg' width="250px" height="250px" data-zoom-image="images/large/image1.jpg"/>
<br />
<script>
$('#zoom_01').elevateZoom({easing : true});
</script>
</body>
</html>
details.php
<?PHP
include 'showimage.php';
?>
Can anyone help me determine why zoom isn't working?
maybe the script is executing before the html finish to add the element , so you could try to call it after a few seconds, something like this in your showimage.php file.
<script type="text/javascript">
setTimeout(function(){
$('#zoom_01').elevateZoom({easing : true});
}, 3000);
</script>
Use on ready event and make your jquery call like that:
<script>
$(document).ready(function(){
$('#zoom_01').elevateZoom({easing : true});
});
and put javascript after included php files.
BTW I don't see included jquery library on your document?
try using it only when the document is ready. You have already included jquery so do this:
$(document).ready(function(){
// you move it to here so only when your page is done loading it will add the event handler
$('#zoom_01').elevateZoom({easing : true});
})