CODEWITHSUNDEEP
jquery
matture
matture

Reputation: 297

jQuery image swap not working

Hey so I found this jsfiddle http://jsfiddle.net/dEHZZ/1/ 

$('div#thumbs img').click( function() {
$('#mainimg img').prop('src', $(this).prop('src'));
return false;  //stop link from navigating
})

scrolling through some questions here, however its not working when i try to implement it here http://ra-yon.com/beta/Test_sites/HFE/products/IR155R926.php

Any ideas?

Upvotes: 1

Views: 100

Answers (3)

james emanon
james emanon

Reputation: 11807

Put your code in ready method:

$(document).ready(function(){
   $('div#thumbs img').click( function() {
   $('#mainimg img').prop('src', $(this).prop('src'));
   return false;  //stop link from navigating
   })
});

You instantiate your code before the dom elements are ready.

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206048

Your jQuery code is run BEFORE your DOModel is read and ready to be manipulated

Use a document ready function

$(function(){  // DOM ready to be manipulated

    $('div#thumbs img').click( function( e ) {
        e.preventDefault();  //stop link from navigating
        $('#mainimg img').prop('src', this.src );
    });

});

Additionally, in your code I cannot see no link, so actually you dint need any return false not event-preventDefault() (I used)

http://api.jquery.com/ready/

Upvotes: 1

j08691
j08691

Reputation: 207891

Wrap your jQuery in a document ready call

$(document).ready(function() {
    $('div#thumbs img').click( function() {
        $('#mainimg img').prop('src', $(this).prop('src'));
        return false;  //stop link from navigating
    })
});

jsFiddle does this for you automatically which is why it's working there.

Upvotes: 0

Related Questions