Change image source on click from another image [JQuery]

Question

I have a carousel menu, see the screenshot below:

screenshot

When I click on "Macchine" the <div> containing a big image appears (in the example the big green image with the number 1). Besides a table with thumbnails is generated automatically below in another <div> through JQuery. I would like that when I click on a thumbnail, a bigger version of the same image appears in the carousel menu.

This is the part of the carousel menu:

<div class="container">
<div id="demo">
<ol>
..........
<li id="macchine">
<h2><span>Macchine</span></h2>

<div class="slideshow" id="kenburns"><img id="img-macchine" alt="1"
                            src="1.gif"></div>
<p class="ap-caption">Macchine</p>
</li>
.......
</ol>
</div>
</div>

This is the JQuery code I used for changing the image in the carousel menu when clicking on a thumbnail (with id=img1):

<script>
    $(document).ready(function() { // when the document is loaded
    var img;
    $('#img1').click(function() {
        img = 'produzione1.gif';
        $('#macchine img').attr("src", img);
        return false;
    });
});
</script>

I also tried using '$('#img-macchine').attr("src", img); (They should be equivalent for identifying the image).

I stored the source path of the image that has to be loaded, in the img variable, then I use the attr() method in jquery but when I click on the thumbnail the image in the carousel doesn't change. (I used a completely different image so that the change would be easier to notice). Nothing happens apparently. Am i doing anything wrong? Can you help me to solve the problem? (Of course the path of the image that has to be loaded is correct).

Yes, there are 2 IDs to consider: <li id="macchine"> (the container) and <img id="img-macchine" ../> (the image). Both "macchine" and "img-macchine" are unique. — Fabio
– Fabio, Commented Feb 8, 2014 at 13:47
The mouse pointer changes so probably yes, I may add an alert() function for checking if it gets executed. — Fabio
– Fabio, Commented Feb 8, 2014 at 13:54
mouse pointer has nothing to do with any click event attached, ya, test it using an alert(). — A. Wolff
– A. Wolff, Commented Feb 8, 2014 at 13:55

A. Wolff · Accepted Answer · 2014-02-08 14:29:52Z

1

For dynamic generated elements, you need to delegate event. For example:

$(document).on('click','#img1', function(){
    img = 'produzione1.gif';
    $('#macchine img').attr("src", img);
});

Now instead of using document, you should delegate to closest static container, maybe:

$(document).ready(function () { // when the document is loaded
    var img;
    $('.container').on('click', '#img1', function () {
        img = 'produzione1.gif';
        $('#macchine img').attr("src", img);
        return false;
    });
});

answered Feb 8, 2014 at 14:29

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

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

1 Comment

Fabio Over a year ago

Thanks for your answer. You solved my problem and I learnt a new thing.

Collectives™ on Stack Overflow

Change image source on click from another image [JQuery]

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related