[Rails] AJAX image manipulation

[Dion Hewson]

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

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

<% end %>



On 8/11/06, Jim Weir <javawaba at hotmail.com> wrote:
>
> >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/
>
> _______________________________________________
> Rails mailing list
> Rails at lists.rubyonrails.org
> http://lists.rubyonrails.org/mailman/listinfo/rails
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://wrath.rubyonrails.org/pipermail/rails/attachments/20060811/91f376ee/attachment.html