Changing src attribute doesn't update image

Question

As part of an image gallery I am using the below code to switch out the src attribute on an image element as a user clicks on various thumbnails. Every part of it has been working fine for about 7 months, since I built it, but sometime in the past few weeks this part of the code stopped working:

var nextLgSrc =  $('.gallery-image._'+selected).data('lgsrc');
$('.hero-image').attr('src', nextLgSrc);

nextLgSrc is succesfully returning an absolute URL to the image that will be replacing the current one. And the src of the img element is in fact changing when the thumbnails are clicked, but the images no longer change. The first (default) image stay stuck, even though the src attribute is changing underneath it.

Can anyone tell me what might have happened and how to fix it?

Here is a link to the full gallery code to see it in context if that's helpful: http://pastebin.com/mae8YQi2

And actually, here is a link to a page that isn't working: http://penumbralux.com/project/marisol

Answer 1

Becuase when you click on images other than first one,

You are only updating src attribute of img .

When inspecting elements with developer tools on chrome, I noticed that srcset attribute of your main image also needs to be updated. I tried it and its working fine after updating srcset attribute of that image.

<img width="970" height="647" src="http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2349-970x647.jpg" class="hero-image wp-post-image" alt="Caption Test" data-smsrc="http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2363-100x100.jpg" data-lgsrc="Array" srcset="http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2363-300x200.jpg 300w, http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2363-1024x683.jpg 1024w, http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2363-750x500.jpg 750w, http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2349-970x647.jpg 970w" sizes="(max-width: 970px) 100vw, 970px">

So in a single sentence, update src and srcset both.

Answer 2

you are using srcset which is used for responsive images on different width browsers. you need to update that as well

Answer 3

Remove srcset and everything would work as expected. And IE does not support it as of today if you wish to work across all browsers. See http://caniuse.com/#feat=srcset

Also it would be a good idea to preload images to make your page more responsive.