CODEWITHSUNDEEP
jqueryimagetoggle
user961627
user961627

Reputation: 12747

Simple custom jquery lightbox - toggling zoomed-in image between front/back

Rather than going for all these lightbox jquery plugins I didn't see any reason not to just make my own div .show() whenever I click on the "zoom" button of a product link. (Each product link and its zoom button is dynamically loaded from the database).

So my website users can just click on zoom and a close-up image of the front of the product pops up. The problem is I also want the user to be able to "flip" and view the back of the product. (In doing this I just change the src of the image $('#closeup'). But I have a problem here. The first flip is usually fine... for every consecutive product zoomed in after that, the flips seem to increase!

So, first product, user clicks "flip": 1 flip from front to back. OK. Second product, user clicks "flip": 1 flip from front to back, another flip from back to front, so user is back on front image! Third product, user clicks "flip", 3 flips! What's going on?

I tried event.stopPropagation() but it didn't make a difference.

My code is as follows:

$('.zoom').live('click', function(e){
    paths = $(this).attr('data-title').split(";"); // data-title is in the "form front_path;back_path"
            // paths[0] now holds path to front image, paths[1] holds path to back image
    $('#closeup').attr('src',paths[0]);

            $('.flipview').click(function(e){
            if($('#closeup').attr('src')==paths[0]){
                       e.stopPropagation() ; 
                       alert('switching from front  '+$('#closeup').attr('src')+' - to back'); 
                       $('#closeup').attr('src', paths[1]);
                    }else{
                       e.stopPropagation(); 
                       alert('switching from back '+$('#closeup').attr('src')+' to front'); 
                       $('#closeup').attr('src', paths[0]) 
                   }
        });
});

So essentially, whenever a product is zoomed in, the .flipview class gets a new custom action assigned to it.

The HTML loaded from the database for a single product is:

<li> <img src="../designs_staff/product0/template0/s16_1350300633/0.jpg">
     <a id="s16_1350300633" class="zoom" title="Zoom in" data-title="../designs_staff/product0/template0/s16_1350300633/0.jpg;../designs_staff/product0/template0/s16_1350300633/1.jpg" href="#">  </a>
</li>

And the HTML for the DIV that pops up with a close up of the product:

<div id='popup'>
<a href='#' class='flipview'>Flip</a> | <a href='#' id='closepopup'>Close</a>
<br /><img id='closeup' />
</div>

Upvotes: 1

Views: 572

Answers (1)

user961627
user961627

Reputation: 12747

Okay, I got it. The problem was that there are many products to zoom in on, but one popup used for all of them. So for every button that was zoomed in, a new click function was attached to $('.flipview'). So every zoom added one more toggle to each flip.

The fix was simply to remove the existing click event handlers before toggling the image source:

    $('.flipview').unbind('click');

Upvotes: 1

Related Questions