How can I make a thumbnail <img> show a full size image when clicked?

Question

Normally you have an image tage with the src as the source of the image and the alt as the alternative text:

<img src="image1.gif" alt="Image 1" />

Can you have something like is?:

<img src="image1.gif" alt="image2.gif" />

So that means the src has an image source and the alt also has an image source.

What I want to do is pull 2 images from flickr using the flickr api (a thumb image and a normal sized image) and when the user clicks on the thumb, the normal sized image is shown.

I have tried something like this:

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

...but I get the default 'not found' image as the thumb (even though the image does really exist).

I am using JQuery/ Javascript.

Any help, suggestions or even alternatives are all welcome and appreciated.

Thanks

---

Thanks for the reply Sam,

I don't like lightbox because I find it too slow and fancy.

but I like geowa4's idea.

but please, keep your answers coming...

thanks

Answer 1

The

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

technique has always worked for me. I used it to good effect in my Super Bowl diary, but I see that the scripts I used are broken. Once I get them fixed I will edit in the URL.

Answer 2

alt is text that is displayed when the image can't be loaded or the user's browser doesn't support images (e.g. readers for blind people).

Try using something like lightbox:

http://www.lokeshdhakar.com/projects/lightbox2/

update: This library maybe better as its based on jQuery which you have said your using http://leandrovieira.com/projects/jquery/lightbox/