Allow users to click anywhere on page to zoom out (Feature Request)

[nueverest]

Our users are requesting that they be able to click anywhere on the screen to zoom out if they are currently zoomed in on the product.

Image illustrating cursor click positions that would allow the image to zoom out.

Here is Javascript I added to smoothproducts.js that allowed me to implement what I'm requesting.

Summary of what I did: Added two variables sp_zoomed_in and click_count Set those variables under 'Zoom In' and 'Zoom Out' Added $(document).click(function (event) {...} that registers clicks anywhere on the page, and zooms out if the click_count >=2 and the user is currently zoomed in.

Whether this is the best way or not I do not know. I just know that it is working for me.

var sp_zoomed_in = false;
var click_count = 0;

// Zoom In
$(document.body).on('click', '.sp-large a', function (event) {
    var largeUrl = $(this).attr('href');
    $(this).parent().parent().find('.sp-large').append('<div class="sp-zoom"><img src="' + largeUrl + '"/></div>');
    $(this).parent().parent().find('.sp-zoom').fadeIn();
    $(this).parent().parent().find(".sp-zoom").draggable();
    $(this).parent().parent().prepend('<div class="sp-full-screen"><a href="#">↕</a></div>');
    sp_zoomed_in = true;    // set flag
    click_count = 0;        // reset click count
    event.preventDefault();
});

// Zoom Out
$(document.body).on('click', '.sp-zoom', function (event) {
    $(this).parent().parent().find('.sp-full-screen').fadeOut(function () {
        $(this).remove();
    });
    $(this).fadeOut(function () {
        $(this).remove();
    });
    sp_zoomed_in = false;   // not zoomed in anymore
    click_count = 0;        // reset click count
});

/* if zoomed in zoom out on click anywhere */
$(document).click(function (event) {
    click_count += 1;
    // click_count requires at least two clicks since the first click might be to zoom in
    if (click_count >= 2 && sp_zoomed_in) {
        $('div.sp-full-screen').remove();
        $('div.sp-zoom').remove();
        sp_zoomed_in = false;   // not zoomed in
        click_count = 0;        // reset click count
    }
});

[kthornbloom]

Thank you for posting your modifications for anyone else who is interested. I guess my thought is that once your mouse leaves the box, you are no longer able to move the zoomed image or interact in any way. Because of that, it seems natural that you'd need to move the mouse back into the box to 'unzoom'. For that reason, I will leave it as it is unless others feel it should change as well.

[Bruce2069]

Is it possible to just have the "larger" image click large (full screen) instead of having the full size image load within the box? I don't want the end user to click on it and then have to click on the diagonal arrow in the upper corner to view it full screen. Thanks in advance!

[kthornbloom]

Solved in version 2.0.0!