[Rails] AJAX image manipulation

[Jim Weir]

>From: "Max Muermann" <ruby at muermann.org>
>Reply-To: rails at lists.rubyonrails.org
>To: rails at lists.rubyonrails.org
>Subject: Re: [Rails] AJAX image manipulation
>Date: Thu, 10 Aug 2006 09:56:28 +1000
>
>On 8/9/06, Jim Weir <javawaba at hotmail.com> wrote:
>>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 -%>
>>   <div class="entry">
>>     <img src="<%= photo.image_url %>"/>
>>     <h3><%= h(photo.title) %></h3>
>>     <%= photo.description %>
>>   </div>
>><% 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?
>>
>
>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:
><img id="big_image" src="<%= product.images[0].url %>">
>
>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
>
>2. in you partial (called _image.rhtml):
>
><img src="<% image.url %>" />
><%= image.description %>
>
>3. In your main view:
>
><div id="big_image">
>  <%= render :partial=>'image', :locals=>{:image=>product.images[0]} %>
></div>
>
><% 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
>_______________________________________________
>Rails mailing list
>Rails at lists.rubyonrails.org
>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,

<center>
<% for pic in @pics %>
<td>
    <span onmouseover="document.rollimg.src='<%=pric.image_url %>';">
        <img src="<%= pic.image_url %>" width="50" height="50" border="0" 
alt="Images" />
    </span>
</td>


<% end %>
</center>
<p align="center">
    <img src="<%=pic.image_url %>" width="350" height="450" border="0"
        alt="" name="rollimg" />
</p>

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/