Aaron Happe
Aaron Happe

Reputation: 11

jQuery not working fully in Safari

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&amp;Beyond.jpg" alt="Gaylen and Beyond - large image " width="921" height="718" class="my-image" /></div>

Upvotes: 0

Views: 10160

Answers (2)

Luke Madhanga
Luke Madhanga

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

Blaster
Blaster

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

Related Questions