[jQuery] Re: Surefire way to animate thumbnails upon load

[Nisar Nisar Rafiq]

*http://tinyurl.com/bmmfhd*

* *

*http://tinyurl.com/bml9w5*



*http://tinyurl.com/89m6ah*

On Mon, Mar 2, 2009 at 9:08 PM, vani <ivan.sval...@gmail.com> wrote:

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