Download as
Browse Code »

Commit 424b795e83a802992aadeedddc06403979d30eea

Authored by Rafael Martins
1 parent 6dcb2e05
Exists in master and in 28 other branches 1.2+SPB2, 2_split_by_role, add_fields_in_api, api_fixies, api_pagination, api_private_token, api_tasks, article_hit_count, blog_page_bug, checkbox_to_user_can_edit_page, communities_ratings, communities_ratings_moderation, community_ratings_rebase, fix_cloned_article_parent, fix_gallery_image_url, fix_javascript_categories, fix_optional_fields, fix_suggest_article, fix_user_email_validation, highlight_block_fix, notification_plugin, notification_plugin_rebase, script_to_update, split_by_role, stable, temp_ratings, tests, tests_fixies

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
Showing 4 changed files with 43 additions and 5 deletions   Show diff stats
app/helpers/display_helper.rb
  Diff comments   View file @424b795
... ... @@ -8,6 +8,14 @@ module DisplayHelper
8 8 opts
9 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 19 def price_span(price, options = {})
12 20 content_tag 'span',
13 21 number_to_currency(price, :unit => environment.currency_unit, :delimiter => environment.currency_delimiter, :separator => environment.currency_separator),
... ...
app/views/catalog/index.rhtml
  Diff comments   View file @424b795
... ... @@ -11,7 +11,12 @@
11 11 <li class="product <%= "not-available" unless product.available %>">
12 12 <ul>
13 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 20 <% else %>
16 21 <li class="product-big no-image"><%= _('No image') %></li>
17 22 <% end %>
... ... @@ -88,3 +93,13 @@
88 93 </ul>
89 94  
90 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>
... ...
features/browse_catalogs.feature
  Diff comments   View file @424b795
... ... @@ -95,6 +95,14 @@ Feature: browse catalogs
95 95 And I should not see "qualifiers"
96 96 And I should not see "price composition"
97 97  
  98 + Scenario: display "zoom in" button
  99 + Given the following products
  100 + | owner | category | name | price | img |
  101 + | artebonito | categ1 | Agrotox | 12.34 | agrotox |
  102 + And I am on /catalog/artebonito
  103 + And I should not see "No image"
  104 + And I should see "Zoom in" within ".zoomify-image"
  105 +
98 106 Scenario: image links to product page
99 107 Given the following products
100 108 | owner | category | name | price | img |
... ... @@ -122,6 +130,7 @@ Feature: browse catalogs
122 130 | owner | category | name | price | description |
123 131 | artebonito | categ1 | Produto2 | 12.34 | A small description for a product that doesn't exist. |
124 132 And I am on /catalog/artebonito
  133 + And I reload and wait for the page
125 134 Then I should see "Produto2" within "li.product-link"
126 135 And I should see "12.34" within "span.product-price"
127 136 And I should see "description" within "#product-description-button"
... ...
public/stylesheets/application.css
  Diff comments   View file @424b795
... ... @@ -1075,10 +1075,12 @@ code input {
1075 1075 text-align: left;
1076 1076 background: transparent url(/images/black-alpha-pixel.png);
1077 1077 border-bottom: 1px solid #333;
  1078 + text-decoration: none;
1078 1079 }
1079 1080  
1080 1081 .zoomable-image:hover .zoomify-image {
1081 1082 display: block;
  1083 + text-decoration: none;
1082 1084 }
1083 1085  
1084 1086 #article .zoomify-image {
... ... @@ -1093,6 +1095,7 @@ code input {
1093 1095 border-bottom: 1px solid #eee;
1094 1096 display: block;
1095 1097 background: transparent url(/images/zoom.png) left center no-repeat;
  1098 + color: #fff;
1096 1099 }
1097 1100  
1098 1101 #article pre {
... ... @@ -2980,7 +2983,7 @@ div#activation_enterprise div {
2980 2983 }
2981 2984 #product-list li.product {
2982 2985 width: 200px;
2983   - min-height: 260px;
  2986 + min-height: 280px;
2984 2987 float: left;
2985 2988 padding: 10px 30px 10px 0;
2986 2989 margin-bottom: 10px;
... ... @@ -3122,11 +3125,14 @@ div#activation_enterprise div {
3122 3125 #product-list .product-big {
3123 3126 display: block;
3124 3127 width: 200px;
3125   - height: 140px;
  3128 + height: 160px;
3126 3129 border: 1px solid #BFBFBF;
3127   - background-repeat: no-repeat;
3128   - background-position: 50% 50%;
  3130 +/* background-repeat: no-repeat;
  3131 + background-position: 50% 50%; */
3129 3132 position: relative; /* work arround msie bug */
  3133 + text-align: center;
  3134 + display: table-cell;
  3135 + vertical-align: middle;
3130 3136 }
3131 3137 #product-list .product-big.no-image {
3132 3138 line-height: 145px;
... ...