# AJAX image manipulation

**URL:** <https://www.ruby-forum.com/t/ajax-image-manipulation/102017>\
**Category:** Rails\
**Created:** [August 9, 2006, 9:37am UTC](https://www.ruby-forum.com/t/ajax-image-manipulation/102017 "2006-08-09T09:37:21Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jimweirich](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/ce73a5/32.png) [@jimweirich](https://www.ruby-forum.com/u/jimweirich)\
**Post date:** [August 9, 2006, 9:37am UTC](https://www.ruby-forum.com/t/ajax-image-manipulation/102017/1 "2006-08-09T09:37:21Z")

</div>

I have this code in a controller that returns images to my  
browser…with  
ROR.

def index  
@products = Product.find\_all\_ pictures  
end

…this is the .rhtml…

\<% for photo in @pic -%\>

 ![]()
### \<%= h(photo.title) %\>
 \<%= photo.description %\> 
\<% end %\>

…can someonw show me how I can return the results to AJAX? What I  
want to  
do is to display thumbnails along the bottom and when a user clicks on  
one  
have it a 5x7 area on the screen populated…

Can AJAX receive resultsets from ROR?

Thanks,  
Jim

* * *

Express yourself instantly with MSN Messenger! Download today - it’s  
FREE!  
[http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/](http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/)

---

<div class="post-metadata">

**Author:** ![jimweirich](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/ce73a5/32.png) [@jimweirich](https://www.ruby-forum.com/u/jimweirich)\
**Post date:** [August 10, 2006, 7:17pm UTC](https://www.ruby-forum.com/t/ajax-image-manipulation/102017/2 "2006-08-10T19:17:22Z")

</div>

Hi Jim

solution 1  
RJS should be easy to implement, pass image id to RJS call  
and replace the main content area(5x7)with bigimage

Solution 2  
try lightbox, it is easy to implement and results are good

regards  
A.Senthil N.  
[http://senthilnayagam.com](http://senthilnayagam.com)

---

<div class="post-metadata">

**Author:** ![jimweirich](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/ce73a5/32.png) [@jimweirich](https://www.ruby-forum.com/u/jimweirich)\
**Post date:** [August 15, 2006, 2:15pm UTC](https://www.ruby-forum.com/t/ajax-image-manipulation/102017/3 "2006-08-15T14:15:14Z")

</div>

> > def index  
> > \<%= photo.description %\>
> 
> yes, this is entirely possible using Ajax, but if all you need to do  
> \<% for thumbnail in @thumbnails %\>
> 
> img = Image.find(image\_id)
> 
> javascript version is much less verbose, which is a good sign that it's the better solution.
> 
> Max
> 
> * * *
> 
> Rails mailing list  
> removed\_email\_address@domain.invalid  
> [http://lists.rubyonrails.org/mailman/listinfo/rails](http://lists.rubyonrails.org/mailman/listinfo/rails)

Initially I thought learning how to integrate an AJAX framework woould  
be  
more work , but worth it 'cause I get a lot more functionality. But  
you’re  
right, javascript is the fewest lince of code with the least effort for  
the  
effect I want.

I coouldn’t get you code aboe to work with prototype, but this did,

\<% for pic in @pics %\> ![Images]() 

\<% end %\>

![]()

Canyou tell me how to reference a specifc image in the pics collection?  
I  
tried pic.image\_url[0] but it didn’t work…

Thanks,  
Jim

* * *

Express yourself instantly with MSN Messenger! Download today - it’s  
FREE!  
[http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/](http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/)

---

<div class="post-metadata">

**Author:** ![jimweirich](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/ce73a5/32.png) [@jimweirich](https://www.ruby-forum.com/u/jimweirich)\
**Post date:** [August 15, 2006, 2:12pm UTC](https://www.ruby-forum.com/t/ajax-image-manipulation/102017/4 "2006-08-15T14:12:10Z")

</div>

On 8/9/06, Jim W. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote:

> \<% for photo in @pic -%\>
> 
> Can AJAX receive resultsets from ROR?

Firstly, AJAX is not a thing that is “somewhere in Rails”. AJAX is a  
name for a bunch of related technologies that can be used to perform  
http requests in the background, without reloading the full page. In  
Rails, an Ajax call gets mapped to a controller method just like any  
other request. You can use the output from the method (normally a  
rendered partial) to update a named html element in your view.

To answer your question:

yes, this is entirely possible using Ajax, but if all you need to do  
is to change an image, you would probably be better off doing it with  
just javascript (Ajax-based solution further down):

Using Javascript:

1. large image:  
 ![]()

2. thumbnail bar in your view:

\<% for thumbnail in @thumbnails %\>  
\<img src=“\<%= thumbnail.url %\>” onclick=‘$(‘big\_image’).src=’\<%=  
thumbnail.image\_url %\>'"  
\<% end %\>

Assuming that the thumbnail class has fields for url (of the  
thumbnail) and image\_url (of the large image).

BTW, the $(‘big\_image’) notation uses the Prototype “$” function,  
which is shorthand for document.getElementById. You need to \<%=  
include\_javascript\_tag :defaults %\> somewhere for this to work.

Using Ajax:

If, for displaying a large image you also want to display other  
information (say a description of the image), you can use ajax calls  
like so:

1. in your controller:

def large\_image  
image\_id = params[:id]  
img = Image.find(image\_id)  
render :partial=\>“image”, :locals=\>{:image=\>image}  
end

1. in you partial (called \_image.rhtml):

![]()

\<%= image.description %\>

1. In your main view:

 \<%= render :partial=\>'image', :locals=\>{:image=\>product.images[0]} %\>

\<% for thumbnail in @thumbnails %\>  
\<img src=“\<%= thumbnail.url %\>” onclick=‘remote\_function  
:update=\>‘big\_image’, :url=\>{:action=\>large\_image,  
:id=\>thumbnail.image\_id}’"  
\<% end %\>

As you can see, for simply showing a different image, the pure  
javascript version is much less verbose, which is a good sign that  
it’s the better solution.

Max

---

<div class="post-metadata">

**Author:** ![jimweirich](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/ce73a5/32.png) [@jimweirich](https://www.ruby-forum.com/u/jimweirich)\
**Post date:** [August 15, 2006, 2:15pm UTC](https://www.ruby-forum.com/t/ajax-image-manipulation/102017/5 "2006-08-15T14:15:53Z")

</div>

try making pic an instace variable with the @

and in your example above you are referencing pic outside the for loop

\<% for @pic in @pics %\>  
…

![]()

\<% end %\>

---

<div class="post-metadata">

**Author:** ![jimweirich](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/ce73a5/32.png) [@jimweirich](https://www.ruby-forum.com/u/jimweirich)\
**Post date:** [August 15, 2006, 2:18pm UTC](https://www.ruby-forum.com/t/ajax-image-manipulation/102017/6 "2006-08-15T14:18:51Z")

</div>

there are a couple of ways, dont take my code verbatim, its just to get  
you  
thinking in the right direction

one is to update a div using ajax i.e.  
“onclick”=\>" new Effect.Fade(‘blank\_div’); new  
Effect.Appear(‘preview\_div’)"

or just render a partial with the img

an ajax way is to use an \*.rjs file (the rails/ruby javascript ) to  
update a  
div on your page with the selected thumbnail

## e.g in your view

![]()

## Controller

def do\_preview  
p\_id = #{params[:id]}  
@pic = Product.find(:first, :conditions =\> ["id = ? ", p\_id])  
end

## do\_preview.rjs

page.delay(1) do  
#page.show ‘div\_list’ + @params[:id].to\_s #gold  
page.insert\_html :after, ‘div\_list\_edit’ + @params[:id].to\_s, :partial  
=\>  
‘preview’

end

## \_preview.rhtml

![]()#img\_tag will look nicer

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

OR you could simply do this, without all the ajaxie hoopla

## Controller

def do\_preview  
p\_id = #{params[:id]}  
@pic = Product.find(:first, :conditions =\> ["id = ? ", p\_id])  
render(:partial =\> “preview”)  
end

like I said this is just ideas not an actual working example

cheers

dion

[www.blogsaic.com](http://www.blogsaic.com)