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.

Il plugin jQuery ajax-upload-fu

Thu, 29 Jan 2009 09:00:00 +0000

Di recente ho scritto un plug-in jQuery che permette l’upload di file via AJAX senza usare un pulsante file input fisso. Raggiunge il suo scopo installando un handler OnMouseMove sugli elementi selezionati e spostando il pulsante input sotto il cursore del mouse.

La citazione che ha ispirato questo codice e’: “Se Maometto non va alla montagna, la montagna va da Maometto”, il contrario del proverbio piu' noto :).

EDIT 2023: ATTENZIONE: questi link sono scaduti :-( E’ stato estratto dalla codebase JavaScript dell’applicazione Visita CSA, guarda il gist per maggiori informazioni, e dai un’occhiata al codice dell’app live per un esempio di utilizzo.

Ecco il codice sorgente:

//  ~ JavaScript Kung-FU, with an excess chunky bacon dose! ~
// This plugin allows seamless ajax file uploads without having
// a fixed file input button. It achieves this by installing an
// OnMouseMove handler over the interested elements, and moving
// the input button under the cursor. <<If Muhammad won't go to
// the the mountain, the mountain will come to Muhammad.>> :-).
//
// This approach is needed on the majority of browser, except
// Safari, on which the coder is allowed to trigger a "click" 
// event onto an input type=file element. On other browsers,
// you can not, that's why the complicated mousemove approach
// was chosen.
//
// Either way, when the value of the input type=file changes,
// handlers are disabled, and a user-provided callback is then
// called (passed via the "upload" option). Handlers are then
// re-enabled again when the upload succeeds or fails.
//
// IE has additional problems, because, quite unexplicably,
// when submitting a form that causes a page load, the change
// event on the file input is triggered AGAIN, thus triggering
// a new file upload. To circumvent this, you can pass a "linked" 
// option, that contains the jQuery selector of the form, and
// whenever an input under this form is hovered, ajax upload
// handlers are temporarily cleared and thus the spurious form
// submission.
//
// The jquery Form plugin is a perfect companion of this one,
// because of its .ajaxSubmit method. Have a look at its home
// page: http://malsup.com/jquery/form/.
// 
// Have fun!
// - vjt@openssl.it
//
$.fn.ajaxFormUpload = function(options) {
  var positioning = { top: 0, left: 0,
    position: 'absolute', cursor: 'pointer', 'z-index': 2 };

  var form = $(options.form || '#ajax_upload');
  form.css(positioning)

  var input = form.find('input[type=file]');
  input.css($.extend(positioning, { width: '10px', opacity: 0, 'font-size':'0px' }));

  var hovering_element = null;

  var elements = $(this);

  var handler, event_;
  if ($.browser.safari) {
    event_ = 'click', handler = function() {
      hovering_element = $(this);
      input.click();
    };
  } else {
    event_ = 'mousemove', handler = function(event) {
      hovering_element = $(this);
      form.css({ left: event.pageX - 10, top: event.pageY - 5 });
    };
  }

  function enable()  { $(elements).bind(event_, handler);   }
  function disable() { $(elements).unbind(event_, handler); }

  input.change(function() {
    var element = hovering_element;
    if (!element) return;
    disable();

    options.upload(element, form);

    enable();
  });

  enable();

  if (options.linked) {
    $(document).ready(function() {
      $(options.linked).find('input').mouseover(function() { hovering_element = null; });
    });
  }
};

Puoi trovarlo su github.

Jquery 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]

Il plugin jQuery ajax-upload-fu