Responsive Image Broken when using custom jQuery

[Revolution]

I manage 15 websites for a specific client.
I received new photos (to be uploaded to the website) from the client last night.
Today. I received a message about the new responsive image feature.

This feature will break an exported site that uses JQuery to dynamically load images.

ie: a LightBox

This is the line of code it creates… notice the new “srcset” and “sizes” attributes.

<img alt="q" class="selected-image" id="the-image" sizes="(max-width: 767px) 87vw, (max-width: 991px) 596px, 808px" src="../photo-images/pqc-16091403-opz.jpg" srcset="../images/pqc-16091401.jpg 500w, ../images/pqc-16091401.jpg 800w">

My code dynamically changes the src (image source) - depending on the viewers thumbnail selection.

The src (image source value) changes correctly (when inspected)…
but somehow this new srcset (source set) will not allow the image the change.

NOTICE HOW SRC IS DIFFERENT THAN SRCSET AFTER THE DYNAMIC CHANGE:

src="../photo-images/pqc-16091403-opz.jpg"

srcset="../images/pqc-16091401.jpg 500w, ../images/pqc-16091401.jpg 800w"

Now I have to figure out a quick fix - since the client was expecting the update to be live @50pm EST… 2 and 1/2 hours from now.

@cyberdave, @PixelGeek

[PixelGeek (Nelson)]

Hi @Revolution

can you send me a link to the site?

[Revolution]

UPDATE

This affects everyone using JQuery to dynamically populate images on a website.

So if you’ve built a LightBox feature in PHP/ JQuery… it will break.

So here’s the quick fix for this.

Simply wipe-out the srcset attribute.

In PHP - using the below example code:

 $("#the-image").attr('src',$url_image); // this line changes the src of an ID to a whatever value is in $url_image
 $("#the-image").attr('srcset',""); // add this code to wipe-out the srcset attribute

I also saw another new attributes (sizes)… which I haven’t played with yet.

It seems the webflow update uses src to load the image into place… but srcset to change the image depending on resolution.

The fix works… but then I lose the responsiveness of the images - I will need to adapt my code to dynamically update srcset as well.

[Revolution]

I’ve already found a work around on my end.
Will see if I can modify my code in order to use the responsive image feature in the future.