Zoomable product images on catalog

* New method on display helper to create a product image link * Tweaks on catalog/index to show the zoomable images * Small fix on browse_catalogs.feature * Fixes on application.css to correctly show the images

Zoomable product images on catalog
* New method on display helper to create a product image link * Tweaks on catalog/index to show the zoomable images * Small fix on browse_catalogs.feature * Fixes on application.css to correctly show the images
Rafael Martins
1 parent 6dcb2e05
Showing 4 changed files with 43 additions and 5 deletions Show diff stats
app/helpers/display_helper.rb
app/views/catalog/index.rhtml
features/browse_catalogs.feature
public/stylesheets/application.css
@@ -8,6 +8,14 @@ module DisplayHelper
             opts
   end
+  def image_link_to_product(product, opts={})
+    return _('No product') unless product
+    target = product_path(product)
+    link_to image_tag(product.default_image(:big), :alt => product.name),
+            target,
+            opts
+  end
+
   def price_span(price, options = {})
     content_tag 'span',
       number_to_currency(price, :unit => environment.currency_unit, :delimiter => environment.currency_delimiter, :separator => environment.currency_separator),
@@ -11,7 +11,12 @@
     <li class="product <%= "not-available" unless product.available %>">
       <ul>
         <% if product.image %>
-          <li id="product-image-link"><%= link_to_product product, :class => 'product-big', :style => 'background-image:url(%s)' % product.default_image(:big) %></li>
+          <li id="product-image-link">
+            <div class="zoomable-image">
+	    <%= image_link_to_product product, :class => 'product-big' %>
+            <a href='<%= product.default_image(:big).gsub('_big','') %>' class="zoomify-image"><span><%= _('Zoom in') %></span></a>
+            </div>
+	  </li>
         <% else %>
           <li class="product-big no-image"><%= _('No image') %></li>
         <% end %>
@@ -88,3 +93,13 @@
 </ul>
 <%= pagination_links @products, :params => {:controller => :catalog, :action => :index, :profile => profile.identifier} %>
+
+<link href="/stylesheets/fancybox.css?1323903734" media="screen" rel="stylesheet" type="text/css" /><script src="/javascripts/jquery.fancybox-1.3.4.pack.js?1323903734" type="text/javascript"></script><script type="text/javascript">
+//<![CDATA[
+jQuery(function($) {
+        $(window).load( function() {
+          $('.zoomify-image').fancybox();
+        });
+      });
+//]]>
+</script>
@@ -95,6 +95,14 @@ Feature: browse catalogs
     And I should not see "qualifiers"
     And I should not see "price composition"
+  Scenario: display "zoom in" button
+    Given the following products
+      | owner      | category | name    | price | img     |
+      | artebonito | categ1   | Agrotox | 12.34 | agrotox |
+    And I am on /catalog/artebonito
+    And I should not see "No image"
+    And I should see "Zoom in" within ".zoomify-image"
+
   Scenario: image links to product page
     Given the following products
       | owner      | category | name    | price | img     |
@@ -122,6 +130,7 @@ Feature: browse catalogs
       | owner      | category | name     | price | description                                           |
       | artebonito | categ1   | Produto2 | 12.34 | A small description for a product that doesn't exist. |
     And I am on /catalog/artebonito
+    And I reload and wait for the page
     Then I should see "Produto2" within "li.product-link"
     And I should see "12.34" within "span.product-price"
     And I should see "description" within "#product-description-button"
@@ -1075,10 +1075,12 @@ code input {
   text-align: left;
   background: transparent url(/images/black-alpha-pixel.png);
   border-bottom: 1px solid #333;
+  text-decoration: none;
 }
 .zoomable-image:hover .zoomify-image {
   display: block;
+  text-decoration: none;
 }
 #article .zoomify-image {
@@ -1093,6 +1095,7 @@ code input {
   border-bottom: 1px solid #eee;
   display: block;
   background: transparent url(/images/zoom.png) left center no-repeat;
+  color: #fff;
 }
 #article pre {
@@ -2980,7 +2983,7 @@ div#activation_enterprise div {
 }
 #product-list li.product {
   width: 200px;
-  min-height: 260px;
+  min-height: 280px;
   float: left;
   padding: 10px 30px 10px 0;
   margin-bottom: 10px;
@@ -3122,11 +3125,14 @@ div#activation_enterprise div {
 #product-list .product-big {
   display: block;
   width: 200px;
-  height: 140px;
+  height: 160px;
   border: 1px solid #BFBFBF;
-  background-repeat: no-repeat;
-  background-position: 50% 50%;
+/*  background-repeat: no-repeat;
+  background-position: 50% 50%; */
   position: relative; /* work arround msie bug */
+  text-align: center;
+  display: table-cell;
+  vertical-align: middle;
 }
 #product-list .product-big.no-image {
   line-height: 145px;
	@@ -8,6 +8,14 @@ module DisplayHelper		@@ -8,6 +8,14 @@ module DisplayHelper
8	opts	8	opts
9	end	9	end
10		10
		11	+ def image_link_to_product(product, opts={})
		12	+ return _('No product') unless product
		13	+ target = product_path(product)
		14	+ link_to image_tag(product.default_image(:big), :alt => product.name),
		15	+ target,
		16	+ opts
		17	+ end
		18	+
11	def price_span(price, options = {})	19	def price_span(price, options = {})
12	content_tag 'span',	20	content_tag 'span',
13	number_to_currency(price, :unit => environment.currency_unit, :delimiter => environment.currency_delimiter, :separator => environment.currency_separator),	21	number_to_currency(price, :unit => environment.currency_unit, :delimiter => environment.currency_delimiter, :separator => environment.currency_separator),
	@@ -11,7 +11,12 @@		@@ -11,7 +11,12 @@
11	<li class="product <%= "not-available" unless product.available %>">	11	<li class="product <%= "not-available" unless product.available %>">
12	<ul>	12	<ul>
13	<% if product.image %>	13	<% if product.image %>
14	- <li id="product-image-link"><%= link_to_product product, :class => 'product-big', :style => 'background-image:url(%s)' % product.default_image(:big) %></li>	14	+ <li id="product-image-link">
		15	+ <div class="zoomable-image">
		16	+ <%= image_link_to_product product, :class => 'product-big' %>
		17	+ <a href='<%= product.default_image(:big).gsub('_big','') %>' class="zoomify-image"><span><%= _('Zoom in') %></span></a>
		18	+ </div>
		19	+ </li>
15	<% else %>	20	<% else %>
16	<li class="product-big no-image"><%= _('No image') %></li>	21	<li class="product-big no-image"><%= _('No image') %></li>
17	<% end %>	22	<% end %>
	@@ -88,3 +93,13 @@		@@ -88,3 +93,13 @@
88	</ul>	93	</ul>
89		94
90	<%= pagination_links @products, :params => {:controller => :catalog, :action => :index, :profile => profile.identifier} %>	95	<%= pagination_links @products, :params => {:controller => :catalog, :action => :index, :profile => profile.identifier} %>
		96	+
		97	+<link href="/stylesheets/fancybox.css?1323903734" media="screen" rel="stylesheet" type="text/css" /><script src="/javascripts/jquery.fancybox-1.3.4.pack.js?1323903734" type="text/javascript"></script><script type="text/javascript">
		98	+//<![CDATA[
		99	+jQuery(function($) {
		100	+ $(window).load( function() {
		101	+ $('.zoomify-image').fancybox();
		102	+ });
		103	+ });
		104	+//]]>
		105	+</script>