CSS-Tricks / AnythingZoomer

Zoom in on images or content
https://css-tricks.github.io/AnythingZoomer/
MIT License
207 stars 45 forks source link

Occasionally, the plugin doesn't seem to initialize properly #20

Closed ryanschmidt closed 11 years ago

ryanschmidt commented 11 years ago

I am certain that I am doing something wrong but I'm having a hard time tracking it down.

$('#zoom').anythingZoomer({overlay: true});

That's the only parameter I'm setting but occasionally the zoom feature will only work at the top 10-20px of the image. If you refresh a couple times, you'll see it work and not work somewhat randomly. I am thinking that I'm initializing it before the images are loaded but I don't see how since I am doing it on ready.

Any ideas that could steer me in the right direction would be appreciated!

Mottie commented 11 years ago

Hi @ryanschmidt!

Sorry for taking so long to respond.

From looking at the initialization code, I would instead wrap it in a $(window).load() function instead of a document ready. So change this;

$(document).ready(function() {

  // DELAY THE INIT OF ZOOMER
  window.setTimeout(function(){
    initZoomer();
  }, 200);
  ...
});

to this:

$(window).load(function() {
  initZoomer();
  ...
});

Also, it looks like Drupal is set to load the script and css Query.extend(Drupal.settings, { ... } so you might also be loading it twice - which isn't likely the problem.

And lastly, in the file that contains the zoomer init code, I see that second copy of the AnythingZoomer script, but it starts out like this:

/*!
    AnythingZoomer v2.2.2
    Original by Chris Coyier: http://css-tricks.com
    Get the latest version: https://github.com/CSS-Tricks/AnythingZoomer
*/

I usually see that weird block of code  when I don't have the document set to "UTF-8 NO BOM". It might not be causing any problems, but I wanted to let you know :)

ryanschmidt commented 11 years ago

Hey @Mottie, the $(window).load() idea was perfect. Why didn't I think of that? Thank you!