CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Shniper
Shniper

Reputation: 854

Creating a preview effect for gallery images that closes when clicked outside

I am making a preview box that pops up when you click a gallery image and need to make it disappear when you click outside of it. I found many solutions but none work with my code. I think the problem is I may need a while loop but I tried several conditions and all were infinite.

This is the last solution I tried. The preview works but I can't get it to close when I click out.

DEMO

$('.portPic').click(function() {
  if ($(this).attr('data-src2')) {
    $('#clickedImg').attr('src', $(this).attr('data-src2'));
  } else {
    $('#clickedImg').attr('src', $(this).attr('src'));
  }
  $('#clickedImg').css('visibility', 'visible');
  $('#clickedImg').blur(function() {
    $('#clickedImg').css('visibility', 'hidden');
  });
});

Upvotes: 0

Views: 101

Answers (3)

Geoff James
Geoff James

Reputation: 3180

I've done a similar thing with a pop-out menu, where the user clicks "off" the menu and it closes. The same can be applied here.

I used an overlay div which spans the whole screen (with a translucent opacity - maybe 0.6 black or similar; or whatever colour you want) which gives a nice modal effect. Give it an id - let's say modal-overlay.

You can put it static in your page code, and set the display to none and make it the full-size of the page (through a CSS class).

<div id="modal-overlay" class="full-screen-overlay"></div>

Set the z-index of the overlay to higher than the rest of your page, and the z-index of your popup to higher than the overlay. Then when you show your popup, also set the visibility of the modal-overlay to visible, too.

In your script code, put an event handler for when the modal div is clicked:

$('#modal-overlay').click(function() {
        $('#clickedImg').hide();
        $('#modal-overlay').hide();
    })

I would also use the .hide() jQuery method, which is easier than typing out the visibility.

Better still, if you have more than 1 thing going on (which you would with a modal overlay), wrap your "show/hide" of the popup in a hidePopup() or closePopup() method and call it onClick to save re-using code.

For effects when opening the popup/overlay, you can also use jQuery animations like .fadeIn() or .slideDown(). Use fadeOut and slideUp to hide.

These animations also perform the showing/hiding, so you wouldn't need to call .hide() or .show().

Check out this link to jQuery's API documentation for animations. Very useful and a good read.

Hope this helps!

Upvotes: 1

T.Shah
T.Shah

Reputation: 2768

You can use modal photo gallery. http://ashleydw.github.io/lightbox/ You can use this codepen code, too. SO is not letting me post the link here. So serach using thi "Bootstrap Gallery with Modal and Carousel".

Hope this helps..

Upvotes: 0

jonstuebe
jonstuebe

Reputation: 35

You'll need to create a seperate div that is most likely fixed position that sits just one step lower (z-index) than your popped-up image. Attach a click handler to this div (overlay) and do your showing/hiding functions in there.

Upvotes: 0

Related Questions