Member Avatar for nspireing

Ive been working on adding an onclick feature to my page. i have a gallery that when you click on a picture it opens to a sized window, what i would like it to then do is close if someone viewing it clicks on the image. Ive tried to artisticly borrow it from other sites but i can never get it to work right or they have some weird script i dont understand.

if someone could help me out or point me in the right direction i would be greatfull also any one who could direct me on finding what other options the onclick feature provides i would also be greatfull.

thanks

  • 3 Contributors
  • 7 Replies
  • 192 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by techniner

Dani AI

Generated

A concise, practical summary and a couple of safer alternatives that build on points from , and .

If keeping a separate popup: attach a click handler inside the popup window (don’t rely on an inline javascript: URL). This is cleaner and easier to troubleshoot across older browsers:

<!-- popup.html -->
<img id="photo" src="image.jpg" alt="photo">
<script>
(function(){
  function onClick(e){
    e = e || window.event;
    var t = e.target || e.srcElement;
    if (t && t.nodeName === 'IMG') {
      try { window.close(); } catch(err){}
    }
  }
  if (document.addEventListener) document.addEventListener('click', onClick, false);
  else if (document.attachEvent) document.attachEvent('onclick', onClick);
  else document.onclick = onClick;
})();
</script>

Notes and troubleshooting

  • Most modern browsers only allow script-initiated windows to close themselves. If the popup was not opened by script, calling close() may be blocked or silently ignored. Pop-up blockers and tabs can also change behavior.
  • Always provide a visible fallback close control (a small close button or keyboard shortcut) so the window can be dismissed when automatic close fails — this echoes ’s UX concern.
  • If tests behave oddly, test via an HTTP server rather than file:// and check console errors.

A better UX approach: avoid separate browser windows altogether and use an in-page overlay/lightbox. It’s more consistent, resists popup blockers, and gives full control over click-to-close:

/* overlay click hides it */
document.getElementById('overlay').addEventListener('click', function(){
  this.style.display = 'none';
});

If the goal is to deter image theft: client-side tricks are easily defeated. Use watermarking, lower-resolution delivery, signed URLs or server-side access rules to meaningfully reduce casual copying.

Recommended Answers

All 7 Replies

Member Avatar for techniner 
<b>My Onclick Demo</b><a href="http://nerdlib.com/" target="_blank" onClick="window.open('', 'myWin2', 'toolbar=no, directories=no, location=no, status=yes, menubar=no, resizable=no, scrollbars=no, width=400, height=390'); return false">Nerd Lib Software Labs</a>
Member Avatar for tgreer

I think he's actually asking for a way to CLOSE the opened window. You can use the "self.close()" method in the opened window. I would not tie that to the click method of the displayed image, however. Display a "close me" button, instead.

In actuality, though, this is completely unnecessary. Everyone understands how to close an open window; there is no need to code an extraneous control.

Member Avatar for nspireing

the thing i was going for here is protecting the images yes i understand anyone who wants them will get them one way or another but i plan on making it as annoying as i can. so my hope was to have a user click on the window and the page will close. ive tried going to a few pages that i know do this and they have some odd script that dosent exist on the same page so i cannot 'ahem' borrow it.

the code from techniner is a little more messy than the one im using but all in all its about the same i just need the extera step. thanks for posting though.

Member Avatar for tgreer

Wrap the img tag in the new window with an anchor declaration. Code the onclick handler for the anchor, using self.close:

<a href="javascript:self.close();"><img src=""></a>
Member Avatar for nspireing

i tried using that and i cannot get it to work in firefox and i tried it in IE 6 and it kept erroring then finally worked.

(did i ever mention how much i hate sp2???)

Member Avatar for tgreer

Make sure you do your testing from a web server, as opposed to local files.

Member Avatar for techniner

That code works fine for me in FireFox and IE6 with XP SP2

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.