diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 5525dda..df6899d 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -1190,4 +1190,23 @@ module ApplicationHelper
task.information[:message] % values
end
+ def add_zoom_to_images
+ if environment.enabled?(:show_zoom_button_on_article_images)
+ stylesheet_link_tag('fancybox') +
+ javascript_include_tag('jquery.fancybox-1.3.4.pack') +
+ javascript_tag("jQuery(function($) {
+ $('#article .article-body img').each( function(index) {
+ var original = original_image_dimensions($(this).attr('src'));
+ if ($(this).width() < original['width'] || $(this).height() < original['height']) {
+ $(this).wrap('
');
+ $(this).parent('.zoomable-image').attr('style', $(this).attr('style'));
+ $(this).attr('style', '');
+ $(this).after(\'%s');
+ }
+ });
+ $('.zoomify-image').fancybox();
+ });" % _('Zoom in'))
+ end
+ end
+
end
diff --git a/app/models/environment.rb b/app/models/environment.rb
index 365cff8..eef1e14 100644
--- a/app/models/environment.rb
+++ b/app/models/environment.rb
@@ -108,7 +108,8 @@ class Environment < ActiveRecord::Base
'admin_must_approve_new_communities' => _("Admin must approve creation of communities"),
'enterprises_are_disabled_when_created' => __('Enterprises are disabled when created'),
'show_balloon_with_profile_links_when_clicked' => _('Show a balloon with profile links when a profile image is clicked'),
- 'xmpp_chat' => _('XMPP/Jabber based chat')
+ 'xmpp_chat' => _('XMPP/Jabber based chat'),
+ 'show_zoom_button_on_article_images' => _('Show a zoom link on all article images')
}
end
diff --git a/app/views/content_viewer/view_page.rhtml b/app/views/content_viewer/view_page.rhtml
index 2a8bc2d..78a60b0 100644
--- a/app/views/content_viewer/view_page.rhtml
+++ b/app/views/content_viewer/view_page.rhtml
@@ -135,3 +135,4 @@
+<%= add_zoom_to_images %>
diff --git a/features/clickable_images.feature b/features/clickable_images.feature
new file mode 100644
index 0000000..b508b35
--- /dev/null
+++ b/features/clickable_images.feature
@@ -0,0 +1,50 @@
+Feature: clickable images
+ As a visitor
+ I want to zoom in article images
+
+ Background:
+ Given feature "show_zoom_button_on_article_images" is enabled on environment
+ And the following users
+ | login |
+ | booking |
+
+ @selenium
+ Scenario: show link if image is scaled
+ Given the following article with image
+ | owner | name | image | dimensions |
+ | booking | small | rails.png | 20x20 |
+ When I go to /booking/small
+ Then I should see "Zoom in"
+
+ @selenium
+ Scenario: not show link if image is not scaled
+ Given the following article with image
+ | owner | name | image | dimensions |
+ | booking | real | rails.png | 50x64 |
+ When I go to /booking/real
+ Then I should not see "Zoom in"
+
+ @selenium
+ Scenario: not show link if image does not have dimensions set
+ Given the following article with image
+ | owner | name | image |
+ | booking | not set | rails.png |
+ When I go to /booking/not-set
+ Then I should not see "Zoom in"
+
+ @selenium
+ Scenario: copy style from image
+ Given the following article with image
+ | owner | name | image | style | dimensions |
+ | booking | with style | rails.png | float: right | 25x32 |
+ When I go to /booking/with-style
+ Then "zoomable-image" should be right aligned
+
+ @selenium
+ Scenario: zoom image
+ Given the following article with image
+ | owner | name | image | dimensions |
+ | booking | zoom | rails.png | 25x32 |
+ When I go to /booking/zoom
+ And I follow "Zoom in"
+ Then the "#fancybox-wrap" should be visible
diff --git a/features/step_definitions/noosfero_steps.rb b/features/step_definitions/noosfero_steps.rb
index 7356c7f..8124bf2 100644
--- a/features/step_definitions/noosfero_steps.rb
+++ b/features/step_definitions/noosfero_steps.rb
@@ -83,6 +83,29 @@ Given /^the following files$/ do |table|
end
end
+Given /^the following articles? with images?$/ do |table|
+ table.hashes.each do |item|
+ owner = Profile[item[:owner]]
+ file = item[:image]
+ img = { :src => "/images/#{file}", :alt => file }
+ img[:width] = item[:dimensions].split('x')[0] if item[:dimensions]
+ img[:height] = item[:dimensions].split('x')[1] if item[:dimensions]
+ img[:style] = item[:style] if item[:style]
+ img_tag = ""
+ article = TinyMceArticle.new(:profile => owner, :name => item[:name], :body => img_tag)
+ if item[:parent]
+ article.parent = Article.find_by_slug(item[:parent])
+ end
+ article.save!
+ if item[:homepage]
+ owner.home_page = article
+ owner.save!
+ end
+ end
+end
+
Given /^the following products?$/ do |table|
table.hashes.each do |item|
data = item.dup
diff --git a/features/step_definitions/selenium_steps.rb b/features/step_definitions/selenium_steps.rb
index 30accda..62eb790 100644
--- a/features/step_definitions/selenium_steps.rb
+++ b/features/step_definitions/selenium_steps.rb
@@ -80,6 +80,11 @@ Then /^there should be ([1-9][0-9]*) "([^\"]*)" within "([^\"]*)"$/ do |number,
response.selenium.get_xpath_count("//*[contains(@class,'#{parent_class}')]//*[contains(@class,'#{child_class}')]").to_i.should be(number.to_i)
end
+Then /^"([^\"]*)" should be (left|right) aligned$/ do |element_class, align|
+ # Using xpath is the only way to count
+ response.selenium.get_xpath_count("//*[contains(@class,'#{element_class}') and contains(@style,'float: #{align}')]").to_i.should be(1)
+end
+
#### Noosfero specific steps ####
Then /^the select for category "([^\"]*)" should be visible$/ do |name|
diff --git a/public/images/fancybox/blank.gif b/public/images/fancybox/blank.gif
new file mode 100644
index 0000000..35d42e8
Binary files /dev/null and b/public/images/fancybox/blank.gif differ
diff --git a/public/images/fancybox/fancy_close.png b/public/images/fancybox/fancy_close.png
new file mode 100644
index 0000000..0703530
Binary files /dev/null and b/public/images/fancybox/fancy_close.png differ
diff --git a/public/images/fancybox/fancy_loading.png b/public/images/fancybox/fancy_loading.png
new file mode 100644
index 0000000..2503017
Binary files /dev/null and b/public/images/fancybox/fancy_loading.png differ
diff --git a/public/images/fancybox/fancy_nav_left.png b/public/images/fancybox/fancy_nav_left.png
new file mode 100644
index 0000000..ebaa6a4
Binary files /dev/null and b/public/images/fancybox/fancy_nav_left.png differ
diff --git a/public/images/fancybox/fancy_nav_right.png b/public/images/fancybox/fancy_nav_right.png
new file mode 100644
index 0000000..873294e
Binary files /dev/null and b/public/images/fancybox/fancy_nav_right.png differ
diff --git a/public/images/fancybox/fancy_shadow_e.png b/public/images/fancybox/fancy_shadow_e.png
new file mode 100644
index 0000000..2eda089
Binary files /dev/null and b/public/images/fancybox/fancy_shadow_e.png differ
diff --git a/public/images/fancybox/fancy_shadow_n.png b/public/images/fancybox/fancy_shadow_n.png
new file mode 100644
index 0000000..69aa10e
Binary files /dev/null and b/public/images/fancybox/fancy_shadow_n.png differ
diff --git a/public/images/fancybox/fancy_shadow_ne.png b/public/images/fancybox/fancy_shadow_ne.png
new file mode 100644
index 0000000..79f6980
Binary files /dev/null and b/public/images/fancybox/fancy_shadow_ne.png differ
diff --git a/public/images/fancybox/fancy_shadow_nw.png b/public/images/fancybox/fancy_shadow_nw.png
new file mode 100644
index 0000000..7182cd9
Binary files /dev/null and b/public/images/fancybox/fancy_shadow_nw.png differ
diff --git a/public/images/fancybox/fancy_shadow_s.png b/public/images/fancybox/fancy_shadow_s.png
new file mode 100644
index 0000000..d8858bf
Binary files /dev/null and b/public/images/fancybox/fancy_shadow_s.png differ
diff --git a/public/images/fancybox/fancy_shadow_se.png b/public/images/fancybox/fancy_shadow_se.png
new file mode 100644
index 0000000..541e3ff
Binary files /dev/null and b/public/images/fancybox/fancy_shadow_se.png differ
diff --git a/public/images/fancybox/fancy_shadow_sw.png b/public/images/fancybox/fancy_shadow_sw.png
new file mode 100644
index 0000000..b451689
Binary files /dev/null and b/public/images/fancybox/fancy_shadow_sw.png differ
diff --git a/public/images/fancybox/fancy_shadow_w.png b/public/images/fancybox/fancy_shadow_w.png
new file mode 100644
index 0000000..8a4e4a8
Binary files /dev/null and b/public/images/fancybox/fancy_shadow_w.png differ
diff --git a/public/images/fancybox/fancy_title_left.png b/public/images/fancybox/fancy_title_left.png
new file mode 100644
index 0000000..6049223
Binary files /dev/null and b/public/images/fancybox/fancy_title_left.png differ
diff --git a/public/images/fancybox/fancy_title_main.png b/public/images/fancybox/fancy_title_main.png
new file mode 100644
index 0000000..8044271
Binary files /dev/null and b/public/images/fancybox/fancy_title_main.png differ
diff --git a/public/images/fancybox/fancy_title_over.png b/public/images/fancybox/fancy_title_over.png
new file mode 100644
index 0000000..d9f458f
Binary files /dev/null and b/public/images/fancybox/fancy_title_over.png differ
diff --git a/public/images/fancybox/fancy_title_right.png b/public/images/fancybox/fancy_title_right.png
new file mode 100644
index 0000000..e36d9db
Binary files /dev/null and b/public/images/fancybox/fancy_title_right.png differ
diff --git a/public/images/fancybox/fancybox-x.png b/public/images/fancybox/fancybox-x.png
new file mode 100644
index 0000000..c2130f8
Binary files /dev/null and b/public/images/fancybox/fancybox-x.png differ
diff --git a/public/images/fancybox/fancybox-y.png b/public/images/fancybox/fancybox-y.png
new file mode 100644
index 0000000..7ef399b
Binary files /dev/null and b/public/images/fancybox/fancybox-y.png differ
diff --git a/public/images/fancybox/fancybox.png b/public/images/fancybox/fancybox.png
new file mode 100644
index 0000000..65e14f6
Binary files /dev/null and b/public/images/fancybox/fancybox.png differ
diff --git a/public/images/zoom.png b/public/images/zoom.png
new file mode 100644
index 0000000..750e6bd
Binary files /dev/null and b/public/images/zoom.png differ
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
index 8e8c537..7369c39 100644
--- a/public/javascripts/application.js
+++ b/public/javascripts/application.js
@@ -667,3 +667,9 @@ function add_comment_reply_form(button, comment_id) {
}
return f;
}
+
+function original_image_dimensions(src) {
+ var img = new Image();
+ img.src = src;
+ return { 'width' : img.width, 'height' : img.height };
+}
diff --git a/public/javascripts/jquery.fancybox-1.3.4.pack.js b/public/javascripts/jquery.fancybox-1.3.4.pack.js
new file mode 100644
index 0000000..c41676c
--- /dev/null
+++ b/public/javascripts/jquery.fancybox-1.3.4.pack.js
@@ -0,0 +1,46 @@
+/*
+ * FancyBox - jQuery Plugin
+ * Simple and fancy lightbox alternative
+ *
+ * Examples and documentation at: http://fancybox.net
+ *
+ * Copyright (c) 2008 - 2010 Janis Skarnelis
+ * That said, it is hardly a one-person project. Many people have submitted bugs, code, and offered their advice freely. Their support is greatly appreciated.
+ *
+ * Version: 1.3.4 (11/11/2010)
+ * Requires: jQuery v1.3+
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ */
+
+;(function(b){var m,t,u,f,D,j,E,n,z,A,q=0,e={},o=[],p=0,d={},l=[],G=null,v=new Image,J=/\.(jpg|gif|png|bmp|jpeg)(.*)?$/i,W=/[^\.]\.(swf)\s*$/i,K,L=1,y=0,s="",r,i,h=false,B=b.extend(b("")[0],{prop:0}),M=b.browser.msie&&b.browser.version<7&&!window.XMLHttpRequest,N=function(){t.hide();v.onerror=v.onload=null;G&&G.abort();m.empty()},O=function(){if(false===e.onError(o,q,e)){t.hide();h=false}else{e.titleShow=false;e.width="auto";e.height="auto";m.html('
The requested content cannot be loaded. Please try again later.