I have this code to launch jQuery elevateZoom but, only works if I put an alert() before.
I have already try with/without load() function.
jQuery(document).ready(function($){
alert("Hi");
$("#sh-product-main-image").load(function(){
$(this).elevateZoom({
zoomType: "inner",
debug : true,
cursor: "crosshair",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 500
});
});
});
This is another variation of the code I have tried:
jQuery(document).ready(function($){
alert("Hi");
$("#sh-product-main-image").elevateZoom({
zoomType: "inner",
debug : true,
cursor: "crosshair",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 500
});
});
This is because $(document).ready() happens when the DOM is loaded, not when all the images are loaded. The alert causes a delay and allows time for the image to be loaded.
The following should work:
$(window).on("load", function() {
$("#sh-product-main-image").elevateZoom({
zoomType: "inner",
debug : true,
cursor: "crosshair",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 500
});
});
I think elevateZoom plugin requires only DOM to be fully loaded in order to work properly, not the Page load! (DOM load is normally recommended over Page load!)
I think the code below would be enough:
$(function() { /* Executed after DOM did load */
$("img#sh-product-main-image").elevateZoom({
zoomType: "inner",
debug : true,
cursor: "crosshair",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 500
});
});