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?
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.
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: