spree-contrib / spree_product_zoom

Lightbox zoom functionality to show original product image
http://guides.spreecommerce.org
BSD 3-Clause "New" or "Revised" License
31 stars 95 forks source link

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

Closed jetsgit closed 12 years ago

jetsgit commented 12 years ago

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 c93dbcc659ba1aa5ef843e6aed2d64c257a7f6a2 (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
LBRapid commented 12 years ago

I'm not seeing these issues at all on a fresh 1-1-stable store with spree_product_zoom though.

LBRapid commented 12 years ago

@bluehandtalking Please try updating again and tell me if you see these issues. I have horizontal scrolling with both buttons working on 1-1-stable now.

jetsgit commented 12 years ago

I just installed latest 1-1-stable, correct Images show up, fantastic! Thanks! (That would be secondary images, when clicked, brings up zoomed image of image clicked on)

I had changed the gemspec, because I forked from master and you had not pulled fixes into 1-1-stable at that time.

Regarding the vertical scrolling---I still get that, also with a new unwanted scrollbar for image itself, and lastly both arrows only scroll in the one direction as I mentioned earlier. The vertical scrolling is pretty well documented, but version of jquery.fancybox.js I patched has it corrected.

Jet

jetsgit commented 12 years ago

Also, new to Spree so not sure where this configuration you have in your docs would go:

Spree::ProductZoom::Config.default_image_style = :large

I put it in a file config/initializer/spree_product_zoom.rb

...but that generated an error.

Thanks!

Jet

jetsgit commented 12 years ago

I guess I don't understand how you get horizontal scrolling from using jquery.fancybox.js v2.0.6, which is in your repository for spree_product_zoom 1-1-stable.

I just excerpted the a segment from that which controls scrolling:

 changeIn: function () {
        var wrap     = F.wrap,
            current  = F.current,
            effect   = current.nextEffect,
            elastic  = effect === 'elastic',
            startPos = F._getPosition( elastic ),
            endPos   = { opacity : 1 };

        startPos.opacity = 0;

        if (elastic) {
            startPos.top = getValue(parseInt(startPos.top, 10) - 200);
            endPos.top = '+=200px';
        }

        wrap.css(startPos)
            .show()
            .animate(endPos, {
                duration : effect === 'none' ? 0 : current.nextSpeed,
                easing   : current.nextEasing,
                complete : F._afterZoomIn
            });

As you can see from above, the position is being shifted in a vertical direction. That is part of the segment I changed---using left instead of top.

Are you overriding the above behavior elsewhere, or have different version of jquery.fancybox.js?

jetsgit commented 12 years ago

I believe I have found the source of confusion on this. In your 1-1-stable the version of jquery.fancybox.js you are using is v2.0.6. It behaves exactly as I described, scrolling vertically and either button making no difference in the direction of the scroll.

I installed jquery.fancybox.js v2.1.3 in my fork, and the behavior is perfect, working the way you described and my modified version of v2.0.6 worked.

I believe it is possible you are using a local version of v2.1.3, and you have not pushed that up.

Thanks for all the improvements!

Jet

LBRapid commented 12 years ago

I am not using a different version locally. When I last tried to update to 2.1.3 it caused a lot of problems for me. Would you be willing to submit a pull request with just the updated version of 2.1.3? I want to see if I bring that commit in whether or not the issues go away for me.

John Dyer http://twitter.com/lbrapid

On Wednesday, October 24, 2012 at 12:52 PM, Jerrold Thompson wrote:

I believe I have found the source of confusion on this. In your 1-1-stable the version of jquery.fancybox.js you are using is v2.0.6. It behaves exactly as I described, scrolling vertically and either button making no difference in the direction of the scroll. I installed jquery.fancybox.js v2.1.3 in my fork, and the behavior is perfect, working the way you described and my modified version of v2.0.6 worked.
I believe it is possible you are using a local version of v2.1.3, and you have not pushed that up. Thanks for all the improvements! Jet

— Reply to this email directly or view it on GitHub (https://github.com/spree/spree_product_zoom/issues/8#issuecomment-9746910).

jetsgit commented 12 years ago

Seems like one of my posts is missing. Somehow didn't take! In that I mentioned my experiment with 2.1.3 worked EXCEPT for images not getting zoomed---they were thumbnail size.

So my working version is your 1-1-stable and a patched version of 2.0.3.

I was never able to get 2.0.3 to scroll images from left to right (or vice-versa) so I created a patch for that. It is working great, and as I mentioned previously also fixed bug of not being able to scroll in both directions.

You can grab it from my 1-1-stable fork if you would like to try it.

LBRapid commented 12 years ago

Will look at bringing this into 1-1-stable when time allows. I'm super swamped lately. If you submit a pull request with just those changes I could probably get it merged quicker.

Cheers

chrise86 commented 11 years ago

Still getting a problem on 1-3-stable branch:

The thumbs show if there are only variant images, but the product image is the spree missing image default, and the click to zoom handlers are not triggered i.e. the main image is un-clickable (even after clicking a thumbnail) and there is no "click to zoom" icon/button

jetsgit commented 11 years ago

@chrise86 , did you try:

git://github.com/bluehandtalking/spree_product_zoom.git

...the 1-1-stable branch? I have been using it with 1-3-stable with no problems. I had the problem with "click to zoom icon missing also, but can't remember if I fixed that in my app or in the extension. If you give it a try and are still having problems with the click-to-zoom I will look into it further. Believe the product image problem you are having is not related to spree_product_zoom but in how your assets are set up.

chrise86 commented 11 years ago

Thanks @bluehandtalking , for some reason I get NameError: uninitialized constant Spree::ProductZoom::Config after switching to your branch.

I've tried Spree::ProductZoom::Config[:default_image_style] = :large and Spree::ProductZoom::Config.default_image_style = :large in the initializer and neither work. Any ideas?

Also, how do you mean the way the assets are set up?

jetsgit commented 11 years ago

@chrise86, did you run bundle exec rails g spree_product_zoom:install? Did you check 'app/assets/javascripts/store/all.js' to see if spree_product_zoom is there?