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); } });
        }

Reply via email to