# Image replacement (new Effect.\*\*\*\*\*) problem

**URL:** <https://www.ruby-forum.com/t/image-replacement-new-effect-problem/51699>\
**Category:** Rails\
**Created:** [January 6, 2006, 1:34am UTC](https://www.ruby-forum.com/t/image-replacement-new-effect-problem/51699 "2006-01-06T01:34:06Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![beachguy82](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/b/9dc877/32.png) [@beachguy82](https://www.ruby-forum.com/u/beachguy82)\
**Post date:** [January 6, 2006, 1:34am UTC](https://www.ruby-forum.com/t/image-replacement-new-effect-problem/51699/1 "2006-01-06T01:34:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![beachguy82](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/b/9dc877/32.png) [@beachguy82](https://www.ruby-forum.com/u/beachguy82)\
**Post date:** [January 6, 2006, 6:44am UTC](https://www.ruby-forum.com/t/image-replacement-new-effect-problem/51699/2 "2006-01-06T06:44:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![beachguy82](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/b/9dc877/32.png) [@beachguy82](https://www.ruby-forum.com/u/beachguy82)\
**Post date:** [January 6, 2006, 10:04am UTC](https://www.ruby-forum.com/t/image-replacement-new-effect-problem/51699/3 "2006-01-06T10:04:42Z")

</div>

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](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:

---

<div class="post-metadata">

**Author:** ![beachguy82](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/b/9dc877/32.png) [@beachguy82](https://www.ruby-forum.com/u/beachguy82)\
**Post date:** [January 7, 2006, 1:47pm UTC](https://www.ruby-forum.com/t/image-replacement-new-effect-problem/51699/4 "2006-01-07T13:47:20Z")

</div>

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](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: