I'm trying to add pulse effect to thumbnails in my gallery, so that they animate one after another upon load. If you look at the code you'll probably notice I'm using fxqueue plugin for queuing animation, but the problem persists even if I don't use it. This is the code, and it works in my virtual machine setup and on the web, but some thumbnails fail to fire the load event if I connect to my virtual machine from the host(thumbnails probably load before the code has a chance to attach the event):
$(document).ready(function() { $(".dlPicturesImg").each(function() { $(this).load(function() { $(this).data("tmbWidth", $(this).width()); $(this).data("tmbHeight", $(this).height()); //fadeTmb(this); pulseTmb(this); }).attr("src", this.src); /*$('.dlPicturesImg').bind('readystatechange load', function(){ if(this.complete) pulseTmb(this); }).attr('src',this.src);//.appendTo('body'); */ }); }); function pulseTmb(tmb) { var tmbWidth = $(tmb).width(); var tmbHeight = $(tmb).height(); var parWidth = $(tmb).parent().width(); var parHeight = $(tmb).parent().height(); $(tmb).data("tmbWidth", tmbWidth); $(tmb).data("tmbHeight", tmbHeight); $(tmb).width(1); $(tmb).height(1); $(tmb).css("margin-left", Math.round(parWidth / 2) + "px"); $(tmb).css("margin-top", Math.round(parHeight / 2) + "px"); // $(tmb).css("display", "inline"); $(tmb).animate({ borderWidth: <%=tmbBorder%> + "px", marginLeft: Math.round((parWidth - (tmbWidth + <%=tmbBorder%> *2)) / 2) + "px", marginTop: Math.round((parHeight - (tmbHeight + <%=tmbBorder %> *2)) / 2) + "px", width: tmbWidth + "px", height: tmbHeight + "px" }, { queue: "pulseTmbs", speed: 200, wait: 10, callback: function () { bindMouseToTmb(tmb); } }); } function fadeTmb(tmb) { $(tmb).data("tmbWidth", $(tmb).width()); $(tmb).data("tmbHeight", $(tmb).height()); //$(tmb).fadeIn("slow", bindMouseToTmb(tmb)); //$(tmb).fadeIn({ queue: "fadeTmbs", speed: 300, preDelay: 50, postDelay: 50, complete: function() { bindMouseToTmb(tmb); } }); $(tmb).fadeIn({ queue: "fadeTmbs", speed: 200, wait: 10, callback: function() { bindMouseToTmb(tmb); } }); }