Question

This jQuery code is part of a simple thumbnail gallery. It is loaded into a fancybox when I click a link on a page. When I added a preloader part, everything looks ok, but I get an error in firebug: $(imgSwap).preload is not a function.

I’m not sure what I am missing or is that it is getting loaded through ajax into the fancy?

<script type="text/javascript">
$(document).ready(function() {
    // Image swap on hover
    $("#gallery li img").hover(function(){
        $('#main-img').attr('src',$(this).attr('src'));
    });
    // Image preload
    var imgSwap = [];
     $("#gallery li img").each(function(){
        imgUrl = this.src;
        imgSwap.push(imgUrl);
    });
    $(imgSwap).preload();
});
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}   
</script>


    <div id="gallery">
        <img src="http://photos2.img.ie/Full-10176257.jpeg" alt="" id="main-img" width="290px" height="200px"/>
        <ul>
          <li><img src="http://photos2.img.ie/Full-10176257.jpeg" alt="" width="69px" height="52" /></li>
          <li><img src="http://photos2.img.ie/Full-10176258.jpeg" alt="" width="69px" height="52" /></li>
          <li><img src="http://photos2.img.ie/Full-10176259.jpeg" alt="" width="69px" height="52" /></li>
          <li><img src="http://photos2.img.ie/Full-10176260.jpeg" alt="" width="69px" height="52" /></li>
          <li><img src="http://photos2.img.ie/Full-10176262.jpeg" alt="" width="69px" height="52" /></li>
          <li><img src="http://photos2.img.ie/Full-10176256.jpeg" alt="" width="69px" height="52" /></li>
        </ul>
    </div>    

Answer 1

perhaps you are calling your preload function before its declaration, try declaring that function at the top of your code then give call to preload function.