Pop up a full image in Web

3 ways to open a full image:

<img src="/img/thumb"
  onclick='this.src="/img/full"'>

<img src="/img/thumb"
  ondblclick='window.open("/img/full", ...)'>

<a href="image2.gif">
  <img src="image1.gif">
</a>

This page uses a fixed-width grid, and images fit into it. When you have a situation like that, with thumbnails of images, how to open them into full size images?

Three nice ways from Stackoverflow.

1. Make the in-grid image link to the full picture:

   <a href="image_full.gif">
     <img src="image_thumb.gif">
   </a>
   

   It is nice, but it looks like the link <a> does not support double-clicking. I don’t want to spread single-click events all over the web page. It would be like traps for the user everywhere.

2. Use JS & ondblclick to change this.src:

   <img src="/img/thumb"
        onclick='this.src="/img/full"'>
   

   Good JS, but it works in-place. I need to open it in a new window.

3. Open a window instead of <a> to use the <ondblclick> event:

   <img src="/img/thumb"
        ondblclick='window.open("/img/full", ...)'>
   

   Let’s stick with this one.