Question

I am working on a overlay + gallery plugin. But I am stuck at one point. The current code replaces all URL addresses in #main div with new one (wrap.find(“a”).attr(“href”, url);). But I want it to replace only the first one. Please please advice. I hope the question is clear.

        <div id="main"> 
            <a href="http://www.capalbosonline.com/images/634-large.jpg" title="Fairfax Gift Basket"><img src="http://www.capalbosonline.com/images/634-large.jpg" alt="Fairfax Gift Basket" id="productimage" /></a> 
            <a href="http://www.refinethetaste.com/html/media/images/2571243744_f1c6b487ff.jpg" title="Fairfax Gift Basket" ><img id="productimage" alt="Fairfax Gift Basket" src="http://www.refinethetaste.com/html/media/images/2571243744_f1c6b487ff.jpg"/></a>    
        </div>


$(".productthumbs img").click(function() {
    // calclulate large image's URL based on the thumbnail URL (flickr specific)
    var url = $(this).attr("src");
    // get handle to element that wraps the image and make it semitransparent
    var wrap = $("#main").fadeTo("medium", 0.5);
    // the large image from flickr
    var img = new Image();
    // call this function after it's loaded
    img.onload = function() {
        // make wrapper fully visible
        wrap.fadeTo("fast", 1);
        // change the image
        wrap.find("img").attr("src", url);
        wrap.find("a").attr("href", url);
    };
    // begin loading the image from flickr
    img.src = url;
// when page loads simulate a "click" on the first image
}).filter(":first").click();

Answer 1

Change:

wrap.find("a").attr("href", url);

To:

wrap.find("a").eq(1).attr("href", url);

Or you could also do:

wrap.find("a:eq(0)").attr("href", url);