Rails - Jan 2006 - image replacement (new Effect.*****) problem

Here''s what I''m trying to do.  I have two divs, one holds
about 20 small
images of products and the other holds a single large image of one of 
the products.  I''m trying to use the jazzy "new Effect." way
of changing
images but I can''t seem to get it too work.  My script is replacing the
image and then making the element disappear.  What I''m trying to do is 
have one image fade away and then have a new one fade in.  Here is my 
code.  Thanks for any help, I can''t find a good tutorial of this on the
web any where and the "Agile" book doesn''t cover this much.
Currently I''m also only replacing the large image with the current
small
image (this.src).  I can''t figure out how to link the large image
inside
of the samll image tag.  Thanks again for any help!

<%= image_tag url_for_file_column(product, "image_url"),
    { "class"       =>  "small_product",
      "onMouseOver" =>  "this.className =
''product_hover''",
      "onMouseOut"  =>  "this.className =
''small_product''",
      "onClick"     =>  "new Effect.Shake(this);
      new Effect.Fade(''large_image'');
      document.getElementById(''large_image'').style.display =
''inline'';
      document.getElementById(''large_image'').src = this.src;
      new Effect.Appear(''large_image'');"} %>

-- 
Posted via http://www.ruby-forum.com/.

I figured out the part about replacing the large image but I can''t get 
the fade and appear to work still.  Does anyone have experience with 
this?



<%= image_tag url_for_file_column(product, "image_url"),
    { "class"       =>  "small_product",
    "onMouseOver" =>  "this.className =
''product_hover''",
    "onMouseOut"  =>  "this.className =
''small_product''",
    "onClick"     =>  "new Effect.Shake(this);
    document.getElementById(''large_image'').style.display =
''inline'';
    new Effect.Fade(''large_image'');
    Element.show(''large_image'');
    document.getElementById(''large_image'').src =" +
    "''" + url_for_file_column(product,
''large_image_url'') +
    "'';new Effect.Appear(''large_image'');"}
%>











charlie bowman wrote:
> Here''s what I''m trying to do.  I have two divs, one holds
about 20 small
> images of products and the other holds a single large image of one of 
> the products.  I''m trying to use the jazzy "new Effect."
way of changing
> images but I can''t seem to get it too work.  My script is
replacing the
> image and then making the element disappear.  What I''m trying to
do is
> have one image fade away and then have a new one fade in.  Here is my 
> code.  Thanks for any help, I can''t find a good tutorial of this
on the
> web any where and the "Agile" book doesn''t cover this
much.
> Currently I''m also only replacing the large image with the current
small
> image (this.src).  I can''t figure out how to link the large image
inside
> of the samll image tag.  Thanks again for any help!
> 
> <%= image_tag url_for_file_column(product, "image_url"),
>     { "class"       =>  "small_product",
>       "onMouseOver" =>  "this.className =
''product_hover''",
>       "onMouseOut"  =>  "this.className =
''small_product''",
>       "onClick"     =>  "new Effect.Shake(this);
>       new Effect.Fade(''large_image'');
>      
document.getElementById(''large_image'').style.display =
''inline'';
>       document.getElementById(''large_image'').src =
this.src;
>       new Effect.Appear(''large_image'');"} %>

-- 
Posted via http://www.ruby-forum.com/.

Effects don''t run at the time you call them, but over a certain  
amount of
time, allowing other code to be executed.

So, your could would first to the image replacement, and then run
all Effects at the same time.

You need to use effects callbacks for this kind of functionality, so  
it''s:

Effect.Shake(this, { afterFinish: function() {
    $(''large_image'').style.display =
''inline'';
    Effect.Fade(''large_image'', { afterFinish: function() {
      // etc, etc.
    });
});

See http://wiki.script.aculo.us/scriptaculous/show/CoreEffects for
more information on the callbacks.

-Thomas

Am 06.01.2006 um 06:44 schrieb charlie bowman:
> I figured out the part about replacing the large image but I can''t
get
> the fade and appear to work still.  Does anyone have experience with
> this?
>
>
>
> <%= image_tag url_for_file_column(product, "image_url"),
>     { "class"       =>  "small_product",
>     "onMouseOver" =>  "this.className =
''product_hover''",
>     "onMouseOut"  =>  "this.className =
''small_product''",
>     "onClick"     =>  "new Effect.Shake(this);
>     document.getElementById(''large_image'').style.display
= ''inline'';
>     new Effect.Fade(''large_image'');
>     Element.show(''large_image'');
>     document.getElementById(''large_image'').src =" +
>     "''" + url_for_file_column(product,
''large_image_url'') +
>     "'';new
Effect.Appear(''large_image'');"} %>
>

Sorry, for the slow reply.  I will try this when I get home from work 
today.
Thanks!


Thomas Fuchs wrote:
> Effects don''t run at the time you call them, but over a certain
> amount of
> time, allowing other code to be executed.
> 
> So, your could would first to the image replacement, and then run
> all Effects at the same time.
> 
> You need to use effects callbacks for this kind of functionality, so
> it''s:
> 
> Effect.Shake(this, { afterFinish: function() {
>     $(''large_image'').style.display =
''inline'';
>     Effect.Fade(''large_image'', { afterFinish: function()
{
>       // etc, etc.
>     });
> });
> 
> See http://wiki.script.aculo.us/scriptaculous/show/CoreEffects for
> more information on the callbacks.
> 
> -Thomas
> 
> Am 06.01.2006 um 06:44 schrieb charlie bowman:

-- 
Posted via http://www.ruby-forum.com/.