Close image when clicked on outside $('html').click(); conflict with open image?

Question

I have used a simple css and js for showing an image as popup when an image is clicked used and close button on top to close the image. Both openimage and closeimage are js functions i have implemented as
open image function as

function imgv(x,y,img)
{
     document.getElementById('imgv_i2').src = img;
     document.getElementById('imgv_i2').style.width = x;
     document.getElementById('imgv_i2').style.height = y;
     document.getElementById('imgv_i2').width = x;
     document.getElementById('imgv_i2').height = y;
    imgToMiddle('imgv_i2');
    document.getElementById('imgv_i2').style.display = 'block';
}

close image as

function closeimgv()
{
    document.getElementById('imgv_i2').style.display = 'none';
    document.getElementById('imgv_close').style.display = 'none';
}

event as

<a href="javascript:void(0);"  onclick="imgv(101,101,'image url');"><img src="image src"></a>

now for closing image when clicked on outside i have used these like

$('#imgv_i2').click(function(event){
    event.stopPropagation();
});
$('html').click(function() {
if(document.getElementById('imgv_i2').style.display == 'block') {
            closeimgv();
    }
});

now what happens is when click for opening image triggered also the close image function also triggered how can i make the $('html').click(); bind after the open image function triggered and unbind after close image function. Thanks.

Side comment:How about making all your javascript functions to jquery since you're already there. — Drixson Oseña, Oct 28 '13 at 07:38
try to use this click handler $(document).on("click","body",function() { }) — user1956570, Oct 28 '13 at 07:40
@user1956570 with $(document).on("click","body",function() { }) also same thing happens :( — Sathya Raj, Oct 28 '13 at 07:44
Could you make a jsFiddle for a example? Makes it easier with the HTML and a working jsFiddle :) — nkmol, Oct 28 '13 at 09:10

Yury Tarabanko · Answer 1 · 2013-10-28T08:01:44.067

0

Try

$(document).click(function(ev) {
    //avoid clicks on image itself
    if($(ev.originalTarget).is("whatever triggers image opening")) {return;} 

    if(document.getElementById('imgv_i2').style.display == 'block') {
            closeimgv();
    }
});

edited Oct 28 '13 at 08:01

answered Oct 28 '13 at 07:45

Yury Tarabanko

44,270
9
84
98

the same thing with your code also if i add alert(); before close image function the imge holds and then closes .. – Sathya Raj Oct 28 '13 at 07:57
Which element triggers opening? Is it `img#imgv_i2` or something else? – Yury Tarabanko Oct 28 '13 at 08:00

score 0 · Answer 2 · answered Oct 28 '13 at 08:27

0

I would recommend you to use jquery plugins for thick box or popup as they are very simple and easy to implement and customize. There are lots of open source plugins available try them out and they do provide the type of customization you are asking for !

answered Oct 28 '13 at 08:27

Rahul Gupta

9,775
7
56
69

s i know but some of them what i have tried were having more features than i needed and also it would be too much file to include for a simple image popup ... if you have tell me any simple popup plugins ???.. i too load those images as ajax so i have bind their plugin event every time i load that ll also be overkill – Sathya Raj Oct 28 '13 at 08:40
@SathyaRaj You have to just include only one js file for the plugin and all of them supports the image loaded via ajax and most of them are so light weighted to be used on mobile devices – Rahul Gupta Oct 28 '13 at 08:51

Close image when clicked on outside $('html').click(); conflict with open image?

2 Answers2