Image Gallery with Thumbs, having the Full Size Image URL Ready for load

I have a photo gallery with a bunch of thumbnails.

<img src="/images/33113_thumb.jpg" class="thumb" />
<img src="/images/1233_thumb.jpg" class="thumb" />
<img src="/images/99513_thumb.jpg" class="thumb" />

What I'd like to do is use jQuery so that when a user clicks on an image, I can load the full-size image into view.

The problem is I don't know where I can store the full-size URL for the image I want to load. I want to have it available, and not be required to require the server as it would be a performance hit.

Any suggestions where I can store a alternative, full-size URL for the thumbs above? Any t开发者_运维技巧ricks?

Thanks

If you go with the HTML5 DocType you can add custom data attributes to your markup tags.

For instance:

<img src="/img/thumb.jpg" data-altsrc="/img/fullsize.jpg">

JQuery can be used .attr('data-altsrc') to grab the value.

A similar method is being used to store the URL for alt image "rollover" on pagoda.com. It will still work without the HTML5 DocType. The "invalid" attribute will just be flagged if you attempt to validate the markup.

I implemented it using the jquery lightbox plugin. An excerpt is given below or see this website (click on events or latest issue section) for how it appears when implemented

The script

$(function() {
  jQuery('#magscarousel li a').lightBox();
});

The HTML Markup

<ul id="magscarousel" class="jcarousel-skin-mags">
<li><a href="./images/mag_cover_large_7.jpg"><img src='./images/mag_7.jpg' id='mag_cover_7'></a></li>
<li><a href="./images/mag_cover_large_6.jpg"><img src='./images/mag_6.jpg' id='mag_cover_6'></a></li>   
</ul>

What about storing them in an unordered list and having a link to them.

<ul>
    <li><a href="/images/33113.jpg"><img src="/images/33113_thumb.jpg" class="thumb" /></a></li>
</ul>

And then you can capture that click event, cancel the default browser behaviour, but read the links href value to see where the large image is.

This also has an advantage that it works with JavaScript disabled (they can still click through to see the full size image).

Before you develop such an application, I would suggest you look at those existing solutions. Jq.Lightbox would be one.

Back to your question, fundamental idea for javascript functions need to be non-obstrusive, that means even an user don't have the ability to use your script, your web site would still functional. So, the markup for your application would at least like:

<a class='gallery' href='fullsizeimagelink' alt=''><img src='thumbimage'></a>

in such case, even without javascript, user can still click on the image and move to the full size image... in addition, it solves your problem as well.