jquery error "is not a function"

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>

You cannot create a jQuery object from an array of arbitrary strings, or at least you should not. — Felix Kling
– Felix Kling, Commented Feb 24, 2012 at 17:14
Hi Felix I am still learning so I do not have best practice. Could you point me to the way I should? What line exactly, to me they are all arrays, so I am missing something important. Thanks. — Keith Power
– Keith Power, Commented Feb 24, 2012 at 17:25

lonesomeday · Accepted Answer · 2012-02-24 17:02:42Z

2

$(document).ready calls the callback when the DOM is ready. Alternatively, if the DOM is already ready, it calls it straight away. This is clearly so in this case.

For safety, define your jQuery methods (here $.fn.preload) before you use them.

answered Feb 24, 2012 at 17:02

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Keith Power Over a year ago

Thanks, for the reply. I tried moving things around as suggested but I am not a 100% sure what you mean. Could you supply move detail? I have a $(document).ready in the main page the above code gets loaded with the ajax.

Rahul · Accepted Answer · 2012-02-24 17:04:11Z

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.

answered Feb 24, 2012 at 17:04

Rahul

2,2898 gold badges41 silver badges61 bronze badges

Collectives™ on Stack Overflow

jquery error "is not a function"

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related