# How to display different images using ajax?

**URL:** <https://www.ruby-forum.com/t/how-to-display-different-images-using-ajax/81725>\
**Category:** Rails\
**Created:** [March 14, 2006, 5:03pm UTC](https://www.ruby-forum.com/t/how-to-display-different-images-using-ajax/81725 "2006-03-14T17:03:12Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![g0nzo](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/3bc359/32.png) [@g0nzo](https://www.ruby-forum.com/u/g0nzo)\
**Post date:** [March 14, 2006, 5:03pm UTC](https://www.ruby-forum.com/t/how-to-display-different-images-using-ajax/81725/1 "2006-03-14T17:03:12Z")

</div>

Hi!

On my page i display one full size image and a list of thumbnails.  
I’d like to change the full size image with a full size version of a  
thumbnail, after clicking on one of them.

How to write controller action, so it would update the image without  
reloading the whole page? It’s easy with text, but how to reload an  
image?

---

<div class="post-metadata">

**Author:** ![g0nzo](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/3bc359/32.png) [@g0nzo](https://www.ruby-forum.com/u/g0nzo)\
**Post date:** [March 14, 2006, 5:28pm UTC](https://www.ruby-forum.com/t/how-to-display-different-images-using-ajax/81725/2 "2006-03-14T17:28:14Z")

</div>

I didn’t suspect it will work but it just did:

render :text =\> “ ![]()”

---

<div class="post-metadata">

**Author:** ![g0nzo](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/3bc359/32.png) [@g0nzo](https://www.ruby-forum.com/u/g0nzo)\
**Post date:** [March 14, 2006, 5:22pm UTC](https://www.ruby-forum.com/t/how-to-display-different-images-using-ajax/81725/3 "2006-03-14T17:22:19Z")

</div>

On Mar 14, 2006, at 17:03, szymek wrote:

> On my page i display one full size image and a list of thumbnails.  
> I’d like to change the full size image with a full size version of a  
> thumbnail, after clicking on one of them.
> 
> How to write controller action, so it would update the image without  
> reloading the whole page? It’s easy with text, but how to reload an  
> image?

Wrap the full-size image in a div/span with some id to pass to  
link\_to\_remote, and let the controller send the full img element with  
the corresponding src attribute depending on the clicked thumbnail.  
The browser will show the new image (in my trials).

As a design pattern that works for me, to produce the initial page I  
use the same action in the view via render\_component, doing so that  
part is genereated always in the same way, from a single piece of code.

– fxn

---

<div class="post-metadata">

**Author:** ![g0nzo](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/3bc359/32.png) [@g0nzo](https://www.ruby-forum.com/u/g0nzo)\
**Post date:** [March 16, 2006, 9:50pm UTC](https://www.ruby-forum.com/t/how-to-display-different-images-using-ajax/81725/4 "2006-03-16T21:50:03Z")

</div>

Hey thanks!

With all that ajax hype i forgot that i can achieve the same without it  
🙂

Thanks again!

---

<div class="post-metadata">

**Author:** ![g0nzo](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/3bc359/32.png) [@g0nzo](https://www.ruby-forum.com/u/g0nzo)\
**Post date:** [March 14, 2006, 5:50pm UTC](https://www.ruby-forum.com/t/how-to-display-different-images-using-ajax/81725/5 "2006-03-14T17:50:01Z")

</div>

I don’t see why you need ajax for this. Unless you plan on doing some  
funky things on the server side, just do everything in JavaScript. The  
code below is from DevLists and it can be modified to do exactly what  
your asking for.

 ![](https://www.ruby-forum.com/images/flag-on.gif)

Simply have a convention that all main images are named the same as  
thumbnails, except for a \_thm suffix; then use JS to strip the \_thm  
suffix and set the result as the src on the main image. Doing it this  
way will have side benefits: one less http request, faster user  
response, and once the browser caches the images users can switch the  
main image with zero http requests.

HTH.

On Tuesday, March 14, 2006, at 5:03 PM, szymek wrote:

> –  
> Posted via [http://www.ruby-forum.com/](http://www.ruby-forum.com/).
> 
> * * *
> 
> Rails mailing list  
> removed\_email\_address@domain.invalid  
> [http://lists.rubyonrails.org/mailman/listinfo/rails](http://lists.rubyonrails.org/mailman/listinfo/rails)

Cheers!  
–Dave T.  
[http://devlists.com](http://devlists.com) - Email list management  
[http://palmsphere.com](http://palmsphere.com) - Apps for your hand-held

---

<div class="post-metadata">

**Author:** ![g0nzo](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/3bc359/32.png) [@g0nzo](https://www.ruby-forum.com/u/g0nzo)\
**Post date:** [March 14, 2006, 5:40pm UTC](https://www.ruby-forum.com/t/how-to-display-different-images-using-ajax/81725/6 "2006-03-14T17:40:53Z")

</div>

Thanks for this render\_component tip!