Jquery - can't get images to load in lightbox-style gallery

I'm trying to build a lightbox-style gallery in jquery from scratch.

I've got everything working (when you click the target link, the dark, fixed background and opaque white container/frame fade in) EXCEPT that I get a little question mark box where the full-sized image should be.

Based on my research, it sounds like it's an image preloading problem but I'm not sure. Here's the basic script:

JQUERY

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $(".lightboxtrigger").click(function(e) {
        e.preventDefault()           // to keep from opening href in new window
        var bigpic = $(this).attr('href');     // to extract the image url from a's href
        var index = '<img src="' + bigpic + '">';     // to create an image element with the a's href as its src
        $('body').find("#content").html(index);     // to select the lightbox div container and set the src of its embedded image to the href value
        $(".lightbox").delay(800).fadeIn(300);      // to make the lightbox visible
        $(".lightboxbg").fadeIn(800);       // to make the lightbox's surrounding background visible
    });
}); 
</script>

HTML

<body>

<div class="lightboxbg"></div>     
<div class="lightbox">     
    <div id="content">
            <img src="#">
    </div>   
</div>


<div id="samplebox">
    <a class="lightboxtrigger" href="img1-LARGE.png"><img src="img1-SMALL.png"></a> 
    <a class="lightboxtrigger" href="img2-LARGE.png" ><img src="img2-SMALL.png"></a>
    <a class="lightboxtrigger" href="img3-LARGE.png"><img src="img3-SMALL.png" ></a>
</div>

</body>

Solution

It works fine. Do you have the pictures in the right place?

$(document).ready(function(){
    $(".lightboxtrigger").click(function(e) {
        e.preventDefault()           // to keep from opening href in new window
        var bigpic = $(this).attr('href');     // to extract the image url from a's href
        var index = '<img src="' + bigpic + '">';     // to create an image element with the a's href as its src
        $("#content").html(index);     // to select the lightbox div container and set the src of its embedded image to the href value
        $(".lightbox").delay(800).fadeIn(300);      // to make the lightbox visible
        $(".lightboxbg").fadeIn(800);       // to make the lightbox's surrounding background visible
    });
});

<div class="lightboxbg"></div>     
<div class="lightbox" style="display: none">     
    <div id="content">
            <img src="#">
    </div>   
</div>


<div id="samplebox">
    <a class="lightboxtrigger" href="http://lorempixel.com/200/100"><img src="http://lorempixel.com/100/80"></a> 
  <a class="lightboxtrigger" href="http://lorempixel.com/200/100"><img src="http://lorempixel.com/100/80"></a> 
  <a class="lightboxtrigger" href="http://lorempixel.com/200/100"><img src="http://lorempixel.com/100/80"></a> 
</div>