Tengo este código para iniciar jQuery elevateZoom pero solo funciona si pongo una alert() antes.
Ya probé con/sin la función load() .
jQuery(document).ready(function($){ alert("Hi"); $("#sh-product-main-image").load(function(){ $(this).elevateZoom({ zoomType: "inner", debug : true, cursor: "crosshair", zoomWindowFadeIn: 500, zoomWindowFadeOut: 500 }); }); });Esta es otra variación del código que he probado:
jQuery(document).ready(function($){ alert("Hi"); $("#sh-product-main-image").elevateZoom({ zoomType: "inner", debug : true, cursor: "crosshair", zoomWindowFadeIn: 500, zoomWindowFadeOut: 500 }); });Esto se debe a que $(document).ready() ocurre cuando se carga el DOM, no cuando se cargan todas las imágenes. La alerta provoca un retraso y da tiempo para que se cargue la imagen.
Lo siguiente debería funcionar:
$(window).on("load", function() { $("#sh-product-main-image").elevateZoom({ zoomType: "inner", debug : true, cursor: "crosshair", zoomWindowFadeIn: 500, zoomWindowFadeOut: 500 }); });Creo que el complemento elevateZoom requiere que solo DOM esté completamente cargado para funcionar correctamente, ¡no la carga de la página! (¡La carga DOM normalmente se recomienda sobre la carga de la página!)
Creo que el siguiente código sería suficiente:
$(function() { /* Executed after DOM did load */ $("img#sh-product-main-image").elevateZoom({ zoomType: "inner", debug : true, cursor: "crosshair", zoomWindowFadeIn: 500, zoomWindowFadeOut: 500 }); });