Search code examples
jqueryhtmlfancyboxfancybox-2

Fancybox popup prevent when checkbox is clicked

i have a problem with checkbox in image.While clicking on image fancybox opened fine.If i click on checkbox again fancybox opened.It should not be opened when checkbox click.

HTML code

<div class="picture"> 
<a  href="http://farm1.staticflickr.com/313/19831416459_5ddd26103e_m.jpg" class="fancybox popup_fancy"  rel="gallery1" id="fancybox_popup"> 
<img src="http://farm1.staticflickr.com/313/19831416459_5ddd26103e_m.jpg" alt=""> 
<div class="img-overlay">
<input type="checkbox"  class="img_checkobx" name="imgcheckbox"  onclick="checkBox(this);"/>
 </div></a> </div>

Image will appear like this

enter image description here

and fancybox js like this

$(document).ready(function() {
    $(".fancybox").fancybox({
        openEffect  : 'none',
        closeEffect : 'none'
    });

});

prevent fancybox popup when checkbox is click event. Could anyone suggest how to solve this problem.Thanks in advance

Solution

  • Just stop the propagation of event to siblings by using e.stopImmediatePropagation() on checkbox click as below:

    $('.img_checkobx').click(function(e){
    e.stopImmediatePropagation();
});

    DEMO HERE