4

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

Barmar
  • 741,623
  • 53
  • 500
  • 612
Eckstein
  • 785
  • 9
  • 27
  • a quick inspect on your main img, the src did not change as you click the thumbnails below, is that the correct behavior? if not, then you need to revise your click handler logic – Ji_in_coding Feb 04 '16 at 04:21
  • What I get from this example is, you should not be changing the `src` of the element but you should slide slider to the clicked element. – Rayon Feb 04 '16 at 04:26
  • your link show `data-lgsrc="Array"` , that may be the problem. by looking in console currentSrc value is not getting changed – xkeshav Feb 04 '16 at 04:29
  • I have removed `srcset` attribute from image tag and it is working. Though it is taking 1 sec time to reflect new selected image. – Bhushan Kawadkar Feb 04 '16 at 04:34

3 Answers3

4

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.

Hemal
  • 3,682
  • 1
  • 23
  • 54
1

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

Junaid
  • 1,004
  • 8
  • 24
1

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.

Bunti
  • 1,730
  • 16
  • 20
  • Thanks for the tips. I honestly don't care much about IE these days, but I may look into an alt solution if it becomes a major complaint. And pre-loading is a good idea, thank you. – Eckstein Feb 04 '16 at 05:20