This Spree extension adds the ability for users to see more detail in product images via the jQuery plugin Cloud Zoom.
Some credit should also be given to spree-facebox for some of this plugin design.
-
Add the gem source to your Gemfile
gem 'spree_cloud_zoom', :git => 'https://github.com/vjcharles/spree-cloud-zoom.git'
or just
gem 'spree_cloud_zoom
-
Run
bundle install
-
To copy over the javascript and css files, Run
rake spree_cloud_zoom:install:assets
This rake task will be obsolite in rails 3.1
See the example page from the jQuery plugin creator to see what can be customized. cloud-zoom-integration
You can also customize the css file public/stylesheets/cloud-zoom.css
to your liking.
See views/products/_image.html.erb
, copy that into your directory and customize the :rel
parameters.
<%= link_to(product_image(@product), @product.images.first.attachment.url(:large), {:class => 'cloud-zoom', :id => 'zoom1', :rel=>"position: 'inside'"}) %>
If you want the zoom effect in a new div, try the following.
<%= link_to(product_image(@product), @product.images.first.attachment.url(:large), {:class => 'cloud-zoom', :id => 'zoom1', :rel=>"adjustX: 20, adjustY: 20"}) %>
If you have any fixes, feel free to send a pull request.
Copyright (c) 2011 Vincent Charles, released under the New BSD License