basic gallery implementation

rubyonrails-talk
#1

Hi Paul

Paul PH wrote:

Hi all,
I'd like to write a very simple image gallery, but not sure how to go
about navigating the images.

Say I have 10 images, I'd like the image to be on the page with previous
and next buttons which load the next image.

I've got a gallery controller, and i can create an array of many image
objects, but it's the view that i'm not sure how to do.

are there any tutorials out there that could help?
i'm thinking something along the lines of this:
http://shopify.com/screenshots/

Have a look at the pagination documentation [1, 2]. You'll probably
need something like this in your controller (which gives an image and a
Paginator object to the view):

def index
    @image_pages, @images = paginate :images, :per_page => 1
end

And in your view:

<% @images.each |image| do %>
  <%= # code to display each image %>
<% end %>

<%= link_to "Previous image", { :page => @image_pages.current.previous
} if @image_page.current.previous %>
<%= link_to "Next image", { :page => @image_pages.current.next } if
@image_pages.current.next %>

This is from memory and untested but should give you an idea.

Hope this helps,

Mark

[1] http://api.rubyonrails.org/classes/ActionController/Pagination.html
[2]
http://api.rubyonrails.org/classes/ActionView/Helpers/PaginationHelper.html

#2

Paul,
If I understand correctly, you want to have the main picture in the
centre with the previous and next pics already loaded, but not visible.
Try putting the next ones in hidden div's. That might work. This
will look very smooth if you use Ajax. Google maps work in this way,
caching and hiding the surrounding map fragments, making them visible
only when they get focus.

So the "next pic" link actually:
- hides the current pic div
- makes the next hidden div visible
- loads the next one, as hidden.

You could even have thumb previews for prev and next, which load
quickly. Clicking them visually expands them to the larger version,
and puts the centre pic to the left as a thumb, and loads the next one
as a thumb to the right, moving all pics to the left.

Bart