Fancybox plugin added to show large screenshot images.

Gemfile

@@ -60,3 +60,6 @@ gem 'bootstrap-sass'
 
 # Pagination
 gem 'kaminari'
+
+# Lightbox image viewer for full-sized images
+gem 'fancybox2-rails', '~> 0.2.4'

Gemfile.lock

@@ -48,6 +48,8 @@ GEM
     erubis (2.7.0)
     execjs (1.4.0)
       multi_json (~> 1.0)
+    fancybox2-rails (0.2.4)
+      railties (>= 3.1.0)
     hike (1.2.3)
     i18n (0.6.4)
     jbuilder (1.4.2)
@@ -133,6 +135,7 @@ DEPENDENCIES
   binding_of_caller
   bootstrap-sass
   coffee-rails (~> 4.0.0)
+  fancybox2-rails (~> 0.2.4)
   jbuilder (~> 1.2)
   jquery-rails
   kaminari

app/assets/javascripts/application.js

@@ -12,5 +12,6 @@
 //
 //= require jquery
 //= require jquery_ujs
+//= require fancybox
 //= require turbolinks
 //= require_tree .

app/assets/javascripts/packages.js.coffee

@@ -1,3 +1,15 @@
 # Place all the behaviors and hooks related to the matching controller here.
 # All this logic will automatically be available in application.js.
 # You can use CoffeeScript in this file: http://coffeescript.org/
+
+jQuery ->
+  $("a.fancybox").fancybox({
+    	openEffect	: 'elastic',
+    	closeEffect	: 'elastic',
+
+    	helpers : {
+    		title : {
+    			type : 'inside'
+    		}
+    	}
+    })

app/assets/stylesheets/application.css

@@ -10,6 +10,7 @@
  *
  *= require_self
  *= require_tree .
+ *= require fancybox
  */
 
 //= require bootstrap

app/views/packages/_packages_search_results.html.erb

@@ -7,15 +7,24 @@
         <li class="span3">
           <div class="thumbnail">
             <% if package.screenshots.length>0 %>
+              <% screenshot = package.screenshots.first %>
               <div style="text-align: center; height: 120px">
-                <%= link_to (image_tag package.screenshots.first.image_url('small')),
+                <%= link_to (
-                          package.screenshots.first.image_url('large') %>
+                      image_tag(screenshot.image_url('small'))
+                      ),
+                      screenshot.image_url('large'),
+                      :class => 'fancybox',
+                      :title => (
+                        "#{package.description}" +
+                        (screenshot.description.blank? ? '' : " (#{screenshot.description})")
+                        )
+                      %>
               </div>
               <h3><%= package.name %></h3>
               <p><%= package.description %></p>
             <% else %>
               <div style="text-align: center; height: 120px">
-                <%= link_to (image_tag "/thumbnail-404.png"),
+                <%= link_to image_tag("/thumbnail-404.png"),
                           "/path/to/upload/package" %>
               </div>
               <h3><%= package.name %></h3>