Fancybox plugin added to show large screenshot images.

This commit is contained in:
Christoph Haas 2013-08-11 23:19:24 +02:00
parent 35510212ba
commit 857a2706b0
6 changed files with 33 additions and 4 deletions

View file

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

View file

@ -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

View file

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

View file

@ -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'
}
}
})

View file

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

View file

@ -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')),
package.screenshots.first.image_url('large') %>
<%= link_to (
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>