Add Lightbox zoom on the Flickr AJAX Rails tutorial

written by seb on June 11th, 2006 @ 09:25 AM

I’m gonna write the few things to do for adding a nice Lightbox zoom to the Flickr AJAX Rails tutorial.

So let’s go on.


First things to do, creating the following application:

Video Tutorial: Flickr AJAX Rails


Once this is done let’s download Lightbox 2

Now, unzip and copy the following files in the following location:

css/lightbox.css -> public/stylesheets/

js/lightbox.js -> public/javascripts/

images/ (all except image-1.jpg and thumb-1.jpg) -> public/images/


Now let’s change few things in the code:

First adding the lightbox.js and lightbox.css in the application.

File: app/views/layout/application.rhtml

    <%= javascript_include_tag :defaults %>
    <%= stylesheet_link_tag 'flickr' %>

should be change as:

    <%= javascript_include_tag :defaults, 'lightbox' %>
    <%= stylesheet_link_tag 'flickr', 'lightbox' %>


Now let’s make a link on each images.

File: app/views/flickr/_photo.rhtml

<img class="photo" src="<%= photo.sizes[0]['source'] %>" />

should be change as:

<a href="<%= photo.sizes[4]['source'] %>" rel="lightbox"><img class="photo" src="<%= photo.sizes[0]['source'] %>" /></a>


Now it’s important to don’t forget to re-initialize the Lightbox, so let’s do it.

File: app/views/flickr/index.rhtml

:complete => visual_effect(:blind_down, 'photos'),

should be change as:

:complete => visual_effect(:blind_down, 'photos') + %(myLightbox = new Lightbox()),


and that’s should be done. :-)

Any correction ? question ? tip ? Just post a comment ;-)

Comments are closed