Reputation: 11
I have read through the other posts relating to jQuery and Safari and the issues others are having do not seem to be applicable to mine. I am using the latest version of jQuery, and dreamweaver is not catching any mistakes with the javascript. I am in desperate need to find out why this is not working. It works fine in chrome and firefox (and unfortunately I can not test it out for IE at the moment)
<script src="../../zoom/jquery.min.js" type="text/javascript"></script>
<script src="../../zoom/epic-image-zoom.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.my-image').epicZoom( {largeImage: '../../images/large/domestic_musings/Gaylen-Beyond_zoom.jpg', magnification: 1} );
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header"> </div>
<!--End "header"-->
<div class="center"><img src="../../images/large/domestic_musings/Gaylen&Beyond.jpg" alt="Gaylen and Beyond - large image " width="921" height="718" class="my-image" /></div>
Upvotes: 0
Views: 10160
Reputation: 7447
Going to post @sparky's comment here instead so that people actually see it. This was the fix for me. jQuery events were not firing in Safari (but they were on other browsers). I went to the W3C HTML validator, fixed the errors, and that fixed the problem.
Have you validated your HTML? Invalid HTML explains most cross-browser issues. Although, you never explained what issue(s) you're having, so I have no idea. – Sparky Jul 17 '12 at 19:30
Upvotes: 0
Reputation: 9110
Try using onload
event since you are manipulating large images. The dom ready event fires when dom becomes ready not images, so you might want to try this instead:
jQuery(window).load(function($){
$('.my-image').epicZoom( {largeImage: '../../images/large/domestic_musings/Gaylen-Beyond_zoom.jpg', magnification: 1} );
});
Upvotes: 1