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’);”} %>

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’);”} %>

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:

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

Thomas F. 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: