Musings of a Trained Monkey

It was brought to my attention that I didn't post a lot of detail about integrating Typo with Version 2 of lightbox. I'll attempt to correct that with a quick write up.

Start by downloading the most recent lightbox release. From here we will want to copy the images that are distributed with it into our Typo installation's public/images folder.

Next up is the javascript file and the stylesheet. I have made some slight modifications to the originals to make the image paths non-relative and the additon of links that show in the caption portion of the light box. Grab the following javascript file and put it in your public/javascripts directory. Then get the css file and put it in your public/stylesheets directory.

Final step for usage is to place a couple of lines in your active theme's layout/default.rhtml. Under the <%= page_header %> line place the following two lines:

<%= javascript_include_tag "lightbox-modded"  %>
<%= stylesheet_link_tag "/stylesheets/lightbox" %>

This should get you up and running with lone imgs
<img src="..." rel="lightbox"/>
and/or groups of imgs
<img src="..." rel="lightbox[groupName]"/>
<img src="..." rel="lightbox[groupName]"/>

So to grant the flickr sidebar access to the powers of the lightbox script is a fairly simple trick, in your theme's views/plugins/sidebars/flickr/content.rhtml file (you can make this path and the file if it is not present in your particular theme.)

<% if @flickr -%>
<h3><%= @flickr.title  %> (<%= link_to "flickr", @flickr.link %>)</h3>

<div id="flickr">
<% for pic in @flickr.choose(count.to_i) -%>
  <div class="flickr<%= format%>">

<%= case format
          when 'square':
            link_to image_tag(pic.square, :alt => pic.title),
              pic.image.gsub!(/_m/,''),
              { :rel => 'lightbox[flickr]',:alt => pic.title, :title => pic.title }
          when 'rectangle':
            link_to image_tag(pic.thumb, :alt => pic.title),
              pic.image.gsub!(/_m/,''),
              { :rel => 'lightbox[flickr]',:alt => pic.title, :title => pic.title }
          end

 %>
</div>
  <% end -%>
</div>
<% end -%>

Seriously cool update to the lightbox script. Lokesh has has outdone himself. I altered my flickr sidebar to use the new version of lightbox script. Hovering over the image on the the left or right will let you scroll through the pics on the sidebar in all their glory!

Now when you click on a photo, it opens up... Just try it already!