Giter Club home page Giter Club logo

spree_product_zoom's Introduction

SpreeProductZoom

A Spree extension that adds lightbox zoom functionality for product images. The lightbox is powered by fancyBox.

Installation

Add this extension to your Gemfile:

gem "spree_product_zoom", :git => "git://github.com/spree/spree_product_zoom.git"

Then run:

bundle install

Run:

bundle exec rails g spree_product_zoom:install

in order to copy over the required css and js files.

Once installation is complete your product images can be zoomed by clicking on the "Zoom In" button beneath an image.

Configuration

spree_product_zoom has only one configuration option, the paperclip image style to use when zooming in on an image. It defaults to :original.

To change the default style from :original create a file config/initializers/spree_product_zoom.rb with the following content:

Spree::ProductZoom::Config[:default_image_style] = :your_image_style

License

This project has been released under the New BSD License, Copyright (c) 2012 John Dyer. Please keep in mind that fancyBox has to be licensed in particular if you want to use this gem in a commercial way. See for more details: http://www.fancyapps.com/fancybox/#license

spree_product_zoom's People

Contributors

jdutil avatar kennyadsl avatar lbrapid avatar radar avatar rterbush avatar schmijos avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

spree_product_zoom's Issues

Method to change default style

In your README.md you state the way to change default style is:

To change:

 Spree::ProductZoom::Config.default_image_style = :image_style

The above generated an error for me.

Perhaps a more explicit comment would be:

To change default style from :original create a file config/initializers/spree_product_zoom.rb

with the following line:

Spree::ProductZoom::Config[:default_image_style] = :your-style

Thanks!

Jet

Duplicate product image

I created a git branch to test spree_product_zoom.

However, now in my main branch I am getting a duplicate image of the :product image,
to reiterate there are 2 copies, one above the other, of the product image :)

Have deleted cache, only thing I can think of is that sass files are in .gitignore.

This is a problem.

Help!

Jet

Spree 2.4

Got this to work in spree 2.4 but only after I moved the CSS into a separate file in stylesheets/spree/frontend/xtra_fancybox.css.
Also got the arrows (sprites), and other images to work.
I took the image files from your github repo and placed them in the public folder, in order to get everything working in production as well.
In the CSS files I replaced every instance of
background url(<%= 'store/various_photos_here.png' %>)
with
background url('/various_photos_here.png')
product_zoom

CSS styles trampled after installing spree_product_zoom

After installing spree_product_zoom a number of my css styles were over-written. When examining one of them I noticed the style was in screen.css.

So is there a way to change the default way you are loading this in? Evidently it is after my styles are loaded.

Thanks,

Jet

In Spree-2.1 arrows are not shown in production

Hello,

I'm using Spree 2.1 with spree_product_zoom (2-1-stable). After deployment to production I've figured out that arrow images are not shown on zoom. In my dev env everything looks correctly.

Moreover I'm unable to scroll images (by click nothing happens). Can you please take a look?

Does this gem works with spree 3.0.0

i'm getting an error:
Bundler Could not findcompatible versionsfor gem "spree_core":
In snapshot...... as shown below
is there any solution for this please help me out!!
capture

Clicking on Image brings up dialogue box to download

My :original is a psd. So, clicking on an image correctly brings up a dialogue box to save.

However, in the view file _image.html.erb I changed:

<%= link_to image_tag(image.attachment.url(:product), :itemprop => "image"), image.attachment.url(:original), :class => 'fancybox zoom-image' %>

To:

<%= link_to image_tag(image.attachment.url(:product), :itemprop => "image"), image.attachment.url(:large), :class => 'fancybox zoom-image' %>

...along with all occurences of :original to :large

For some reason this is not propagating and path is still:

spree/products/original/2345/myproduct.jpg

Instead of:

spree/products/large/2345/myproduct.jpg

Is the above not correct format for changing url of image?

Thanks! Jet

Not getting the zoom button

I am using spree 1.1.3 I have successfully installed spree_product_zoom with the installation steps but i am not getting any zoom button on images. Is there any line of code to be inserted to obtain the zoom button or the spree_product_zoom gem is not compatible with my spree version?

Variant images not zooming

Hello there,

I have a product that has 3 variants, all with their respective images.

The extension just zoom the images that I have defined as for All variants, but those images that are for a specific variant are not zoomed or displayed in any way.

Just an example product: http://goo.gl/ijhXW

This has Green, Red and Silver variants and at least 18 images, but just the first two are zoomed as those are specified for All variants.

Something different happend with this product: http://goo.gl/khvZ6
This product has no variants, so, all the images is in the master variant (All variants). All the images are displayed. The only issue is that the first image is displayed twice.

Thank you.

Zoom clicked image in gallery

Hello,

Currently I'm developing a new store using Spree 2.1 and spree_product_zoom (2-1-stable).

I've figured out one important improvement, which could really help me:
Whenever I'm on the product page and click on several product images, they are showed in bigger size. If I click on the image, a view with zoomed image is showed. However, uses sees first image in the gallery instead of the clicked one.

From users point of view, it would be more logical to show clicked image instead of first one in gallery on zoom.

Could you please take a look at this?

zoom links to image rather than opening lightbox

pulled from the 2-0 stable branch of spree and spree_product_zoom

instead of displaying the lightbox when selecting the zoom or product image, the original image path is opened in the current window (displaying the image and nothing else).

out of date with spree, should create a 2-1-stable branch and bump master to 2.2.0.beta

I'm not very familiar with spree's versioning conventions so I am not providing a pull request, but users who are currently on spree 2-1-stable are forced to use the master branch of spree_product_zoom and those who are trying to use the spree master branch can't use spree_product_zoom at all because as far as I can tell s.add_dependency 'spree_core', '~> 2.1.0.beta' will not advance minor versions to 2.2.x...

make it work with spree master

perhaps by relaxing the dep?

Bundler could not find compatible versions for gem "spree_core":
  In Gemfile:
    spree_product_zoom (>= 0) ruby depends on
      spree_core (~> 2.3.0.beta) ruby

    spree (>= 0) ruby depends on
      spree_core (2.4.0.beta)

NoMethodError when rendering product page with variants

I'm getting the following exception when I go to a product page for a product that has more than one variant:

NoMethodError in Spree/products#show

undefined method `available?' for #<Spree::Variant:0x0000000796b098>

The relevant part of stack trace:

spree_product_zoom/app/views/spree/products/_thumbnails.html.erb:10:in `block in _ab93dc2ef55505bd9d02bac0880917a9'
spree_product_zoom/app/views/spree/products/_thumbnails.html.erb:9:in `_ab93dc2ef55505bd9d02bac0880917a9'
spree/frontend/app/views/spree/products/show.html.erb:12:in `_7160dc24317fb65c3f3f31c9ef2329fc'

Looks like Spree::Variant.available? has been removed from Spree 3 months ago by this commit: spree/spree@14f911e and this code no longer works:

@variants.each do |v|
    if v.available?
        v.images.each do |i| %>

My configuration:
ruby 2.0.0-p195
rails 3.2.13
spree 2-0-stable
spree_product_zoom 2-0-stable

Clicking on Image or zoom button always brings up the 'main' image

If I click on one of the alternate product images, either using zoom button or
clicking on image currently displayed, the 'main' image is zoomed, not the current image.

Below is example of main image displayed being a detail, while the anchor is for the main image:

<div data-hook="" id="main-image">
          <a rel="gallery" class="fancybox zoom-image large-image" href="/spree/products/1981/original/LHBP2ZT_travelmate-backpack-main.jpg?1350929553"><img src="/spree/products/1982/product/LHBP2ZT_travelmate-backpack-det1.jpg?1350929593" itemprop="image" alt="TravelMate Backpack"></a>
<br>
<a rel="gallery" class="fancybox zoom-image click-to-zoom" href="/spree/products/1981/original/LHBP2ZT_travelmate-backpack-main.jpg?1350929553"><img src="/assets/zoom.gif" class="click-to-zoom" alt="Zoom"></a>

Also, the default behavior I experienced with fancybox is:

The images scroll vertical,
The buttons for left or right scrolling only scrolled in one direction

I have patched fancybox.js v2.0.6 in your commit c93dbcc
(since your latest commit still appears to be broken).

If you wish, I can submit a pull request from the fork of the above commit to enable horizontal scrolling and fix for forward and back scroll buttons not working in your 1-1-stable branch (I set gemspec to spree v1.1.2)

Thanks!

 Jet

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.