Width/Height of an opened image (Gallery)

Question

Im working on a site's gallery which is made of a thumbnail block displaying all the pictures and a section for displaying a specific image.

This is the code i use to display the thumbnail and the image in its real size.

<a class="thumb" name="tuzla1" href="http://hkdnapredak.com/root/images/stories/Tuzla2011.jpg" title="Tuzla">
 <img height="75" width="75" src="http://hkdnapredak.com/root/images/stories/Tuzla2011.jpg" alt="Tuzla" />
</a>

The problem is: I can't think of anything to set the size of the opened image. Setting the thumbnail size is fine: height="75" width="75" but the size of the opened one is the problem.

Answer 1

Using this method, you can't set the size of the image you're linking to. It's going to open in the browsers with no HTML associated with it, so it will open at it's full size (or scaled to fit, depending on the browser).

The solution is to link to a page that contains the image. This lets you set code that determines the image size. However, this is a manual process - 500 images will require 500 custom pages. Not ideal.

If you get more sophisticated, you can build a script and pass it and image name, height and width, then dynamically build the page to display the image at the given height and width. Then you can display an arbitrary number of images with 1 script.

Another way to go is with a lightbox plugin which lets you pop the full sized image up into a box over top of the rest of the page. You've probably seen this method used on Facebook or other sites - it's popular and doesn't take that much effort to use. I like it because you don't have to leave the page you're on, and you can show lots of photos on a fairly compact page.