Firefox/jQuery is not reading any attribute for an img element

Question

So I am attempting to combine two image galleries, Galleria and Lightbox. The way it is supposed to work is that Lightbox will read the href from the anchor tag and Galleria will read the src from the image tag in the following code:

<a href="./public/images/gallery/2.JPG">
<img class="replaced" src="./public/images/gallery/2.JPG"/>
</a>

I am attempting to pull the attribute value of the src out and use it as the value of the href. Just for now, once I get this bit working I have to re-work the code.

This is how I am pulling the attribute value out

var imageSrc = image.attr('src');

Right now I have tested it in FF2,FF3 and neither of them are reading the value. In Chrome and IE it reads the value. What I was thinking is that the image is created in jQuery so perhaps Firefox is moving too quickly reading through and the jQuery hasn't had time to create the image yet?

Any thoughts?

Thanks,
Levi

Answer 1

Well how are you selecting image?

Try:

$('.replaced').each(function(){
   var imageSrc = $(this).attr('src');
   //alert(imageSrc) /*  for IE  */
   console.log(imageSrc);
});

Answer 2

Check the following:

• Did you define image correctly? How are you assigning a value to this?
• Did you ask for the value of image after the position of the DOM element representing that image?
• Did you make sure to put your scripts at the end of your body, just before the closing </body> tag? (If you don't, it's possible you'll wind up with a null reference and any Javascript execution will terminate.)

Chances are good that it's related to one of these three issues.

Answer 3

Are you wrapping your call in a ready event?

$(document).ready(function(){
    var imageSrc = $('img.replaced').attr('src');
});

Please note that if you have multiple images that share the class 'replaced' you need to read the src from each one of them. The above method will only work on a single image, if you want to read the attribute for multiple images use this:

$(document).ready(function(){
    var imageSrc = $('img.replaced').each(function(){
        $(this).attr('src');
    });
});