CODEWITHSUNDEEP
jqueryhtmlsrc
CupcakeByDesign
CupcakeByDesign

Reputation: 17

Change src of an image using jquery to the src of the image clicked on

I've asked this question once before and despite the question being solved in theory, it still isn't working in my actual site.

Details of the original question: Replace a featured image's src with the src of the image clicked on

Jquery I'm using:

$(".galleryimg").click(function(){
    var r1 = $(this).attr("src");
    $('#featured-image').attr("src", r1);
    });

A page on the site in which this code is supposed to work: http://www.hoosiergames.org/textquest.html

I'm currently using this jquery code both inline in the header of this page and in an external jquery file being linked in. Neither seems to be doing the trick, despite the fact that I have also linked the latest jquery library to the page and other jquery on the page works just fine.

Three of us have looked at this and still not found the issue. Here's hoping someone else can spot it.

Thanks in advance for your help, tearing my hair out on this one.

Upvotes: 0

Views: 239

Answers (4)

jshthornton
jshthornton

Reputation: 1314

(function() {
    $(function() { // Document Ready
        var $featuredImage;

        $('.galleryimg').click(function() {
            $featuredImage = $featuredImage || $('#featured-image');

            $featuredImage.prop('src', this.src);
        });
    });
}());

The concept here is to first ensure that all of our codes runs in its own scope and not to pollute the global object (window). Then we need to ensure that the document is ready so that the gallery image can have the click event actually bound to it, otherwise a click even is bound to nothing.

Once the gallery image has been clicked we find the featured image, but not if it has already been found; this will speed up computation as researching the DOM (all of the elements) can be slow. Then we get the clicked image's src (via prop rather than attr - deprecated), then update the featured image's src to it.

It is not needed to wrap the gallery image element in a jQuery object (as it takes time) as we are only going to retrieve the src property from it, which is easy as sin.

The key issue Whilst I might have changed a lot it was purely for cleanup and further learning. The core issue with your original code was that when you do a DOM search via jQuery $('find me!!!) it has to already been in the page. As your code was in the HEAD your page has set to render the element you were looking for. By adding jQuery's DOM Ready function it runs code once the page has all of its elements (sent in the original request) rendered.

Upvotes: 0

Hristo Georgiev
Hristo Georgiev

Reputation: 2519

First, try to put your jquery JUST after your body tag. You can include the .js file itself in the head, but put your script between tags after the body tag.

In this way, the browser will have the document body loaded and will recognize the image.

And, just in case, wrap the document.ready function around your code: 

$(document).ready(function(){
  $(".galleryimg").click(function(){
    var r1 = $(this).attr("src");
    $('#featured-image').attr("src", r1);
    });
});

Good luck!

Upvotes: 0

PeterKA
PeterKA

Reputation: 24648

You sure can use DOM ready as @tony.leo has pointed out, to wait until the DOM is all set up in order to fire your code. Just in case it is important for you to fire this code only when the whole page including the graphics (images) has fully loaded then you would use $(window).load(fn) as follows:

$(window).load(function() {
    $(".galleryimg").click(function(){
        var r1 = $(this).attr("src");
        $('#featured-image').attr("src", r1);
    });
});

Upvotes: 0

tony.leo
tony.leo

Reputation: 91

You'll need to wrap your jQuery code above in:

$(document).ready(function(){
  // your code
});

This will make sure it's run after the document markup is drawn.

Upvotes: 2

Related Questions