Implementare una galleria immagini con facebox e will_paginate

Sat, 21 Feb 2009 00:00:00 +0000

Su VisitaCSA stiamo usando facebox di defunkt per mostrare le immagini dei luoghi in grande. Facebox e’ un ottimo lightbox generico, perche’ e’ veloce, stabile, si basa su jQuery e ha un’API davvero pulita.

Ma avevamo bisogno di qualcosa in piu’ di un semplice lightbox di visualizzazione, perche’ volevamo che i nostri utenti potessero navigare facilmente tra tutte le immagini, possibilmente senza modificare facebox. La soluzione si e’ rivelata piuttosto semplice, grazie anche al plugin will_paginate che stavamo gia’ usando. In sostanza si tratta di avere:

Un model Photo, attrezzato con il metodo has_attachment
Route per le risorse photos (map.resources :photos, :only => :show in config/routes.rb)
Un metodo show nel controller PhotosController che chiama .paginate con un argomento :per_page di 1
Una vista HTML per la risorsa photo, con i controlli di paginazione usando l’helper will_paginate
Del codice jQuery che si aggancia ai link di paginazione e fa caricare al browser via AJAX la foto successiva direttamente nel facebox.

Ecco il codice rilevante, semplificato rispetto a quello effettivamente online, perche’ il model photo e’ in realta’ polimorfico (usa STI) e diverse collezioni sono gestite dal photos controller (foto, volantini, ecc.) per diversi model, con miniature diverse :P.

Model [app/models/photo.rb]

class Photo < ActiveRecord::Base
  has_attachment :storage => :file_system, :path_prefix => 'public/photos',
    :processor => 'ImageScience', :thumbs => { :thumb => '600x800' }
end

Controller [app/controllers/photos_controller.rb]

class PhotosController < ApplicationController
  layout nil
  before_filter :find_place

  # The photo gallery core is here
  def show
    photo = Photo.find(params[:id])
    page = params[:page] || @place.photos.index(photo) + 1
    @photos = @place.photos.paginate(:per_page => 1, :page => page)
    @photo = @photos.first
  end

  def find_place
    @place = Place.find(params[:place_id])
  end
end

Vista [app/views/photos/show.html.erb]

<div class="photo">
  <div style="width: <%= photo_width(@photo) %>px; text-align: center;">
    <%= next_photo_link_for @photo, :in => @photos %>
  </div>
  <p><%=h @photo.title %></p>
  <p>
    <%= will_paginate @photos, :prev_label => '&nbsp;', :next_label => '&nbsp;' %>
  </p>
</div>

La gem image_size e’ necessaria per consentire a facebox di allinearsi correttamente al centro della finestra.

Will_paginate on Marcello Barnaba

Implementare una galleria immagini con facebox e will_paginate

Model [app/models/photo.rb]

Controller [app/controllers/photos_controller.rb]

Vista [app/views/photos/show.html.erb]