Add a Twitter Bootstrap Modal picture array to your view. (HAML, RAILS 3.2, Google Picasa)

bootstrap_modal.rb

# This is how I leveraged twitter bootstrap modals http://twitter.github.com/bootstrap/javascript.html#modals
# in Rails 3.2 with bootstrap-sass working. This is HAML syntax. With Twitter Bootstrap > 2.0.3.1. The pictures are
# pulled from Google Picasa Web Albums and are the url to the thumbnail image. This also explains the .gsub in the 
# helper as I swap the thumbnail out out with a larger image. This will give you a thumbnail array similar to the 
# "more examples" one on this page http://twitter.github.com/bootstrap/components.html#thumbnails

# in your helper file. 
require 'securerandom'

def modal_page( image )
  name = SecureRandom.uuid
  capture_haml do
    haml_concat "<script type='text/javascript'>$('##{name}').modal();</script>".html_safe
    haml_tag :a, :class => 'thumbnail', 'data-toggle'=>"modal", :href=>"##{name}" do
      haml_tag :img, :src=>"#{image}", :alt=>""
    end
    haml_tag :div, :id => "#{name}", :class => 'modal hide fade', :style => "display: none;" do
      haml_tag :div, :class => 'modal-header' do
        haml_tag :button, :class => 'close', :type => 'button', 'data-dismiss' => 'modal' do
          haml_concat "x"
        end
        haml_tag :h3 do
          haml_concat "Picture Enlarger"
        end
      end
      haml_tag :div, :class => 'modal-body' do
        haml_tag :img, :alt => '', :src=>"#{image.gsub("s288", "s400")}"
      end
    end
  end
end

# in your view assuming an array of image urls from Google Picasa. 
%ul.thumbnails
  - @images.each_with_index do |img, i|
    - if i == 0
      %li.span4= modal_page( img )
    - else
      %li.span2= modal_page( img )