20seven

Devigner blog about development and design

Using File_column With LightBox

Using lightbox.js with file_column is a piece-o-cake.

Within the head, add in the defaults so we can use protoype, which is required by lightbox.js and add in the css and js for lightbox.

&#60;%= javascript_include_tag :defaults %><br /> &#60;%= javascript_include_tag "lightbox" %><br /> &#60;%= stylesheet_link_tag "lightbox", :media => "all" %><br />

In the view:

&#60;% @images.each do |image| %><br /> &#xA0;&#xA0;&#xA0;&#60;a href="<%= image_path(url_for_file_column(image, "image")) %>" rel="lightbox" title="&#60;%= h(image.caption) %>"><br /> &#xA0;&#xA0;&#xA0;&#60;%= image_tag url_for_file_column(image, "image", "thumb") %> &#60;/a><br /> &#60;% end %>

Watch any onload conflicts between lightbox and any other javascripts. That had me scratching my head for a few minutes. If there’s a conflict, simply add to your body tag onload="initLightbox()" and that will do it.

Now grab a glass of milk and finish your cake. Non-fat if you sit in front of a monitor all day.