Question

i’m making a lightbox, i’ve followed tutorials just to get this far, and i’m so close. i’m having problems with this line:

}).attr('src', 'imghref');

if i replace ‘imghref’ with ‘images/watercolor.jpg’ then it works fine, but i want ‘imghref’ to be the href of the link the user clicks on.

my second problem, is that if i replace ‘imghref’ with ‘images/watercolor.jpg'(for testing purposes), then when i refresh the page, it loads the image automatically without me ever having clicked on the link, but i want the image to load only when the user clicks on the link. ARRGGG!!!!

    $(function (){
    $('a').click(function() { 
    var imghref = $(this).attr("href");
    loadImage();
    return false;
    });
});


$(function loadImage() {
    var img = new Image();
    $(img).load(function () {
        $(img).hide();
        $('#loader').removeClass('loading').append(img);
        $(img).fadeIn('slow');
    }).error(function () {

    }).attr('src', 'imghref');

});

Answer 1

Pass the variable to the load function and use it as a variable instead of a string constant. Also, make sure that either you declare loadImage in the global scope or the same scope in which its used.

$(function (){ 
    $('a').click(function() {  
        var imghref = $(this).attr("href"); 
        loadImage(imghref); 
        return false; 
    });  

    function loadImage(href) { 
        var img = new Image(); 
        $(img).load(function () { 
            $(img).hide(); 
            $('#loader').removeClass('loading').append(img); 
            $(img).fadeIn('slow'); 
        }).error(function () { 

        }).attr('src', href); 

    }
});