How to display different images using ajax?

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?

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

render :text => “

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

Hey thanks!

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

Thanks again!

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.

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/.


Rails mailing list
[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails

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

Thanks for this render_component tip!