How use jQuery to reload 'srcset' image when browser is resized?

Question

This question is a variation of the question here: Is it possible to recalculate the `srcset` image used if browser window is resized?

Basically my site uses a dynamic slider with multiple images, I can only target the image with say a.class img rather than an ID. Further, there are multiple imgs with that a.class to be modified.

How do I use jQuery or regular javascript to get the browser to update to the new srcset when the browser window resizes? Preferably I would like this done only when the window is resized past a a few trigger points, say for example at the width point 1170px and 1000px.

To put the question another way, is there a way to use jQuery to make srcset to function like art direction? I am not able to use the <picture> element or alternatives instead.

So each image is wrapped with the following code:

<div class="carousuel-image slider-full">
<a href="/post-link">
<img srcset="http://test-site.com/wp-content/uploads/2015/12/collage_hk_day_3-216x160.jpg 216w, http://test-site.com/wp-content/uploads/2015/12/collage_hk_day_3-270x250.jpg 270w, http://test-site.com/wp-content/uploads/2015/12/collage_hk_day_3-570x350.jpg 570w, http://test-site.com/wp-content/uploads/2015/12/collage_hk_day_3-1024x1024.jpg 1024w, http://test-site.com/wp-content/uploads/2015/12/collage_hk_day_3-1170x500.jpg 1170w, http://test-site.com/wp-content/uploads/2015/12/collage_hk_day_3-1170x350.jpg 1170w, http://test-site.com/wp-content/uploads/2015/12/collage_hk_day_3-1200x500.jpg 1200w" sizes="(min-width: 1170px) 1200px, (min-width: 1170px) 1170px, (min-width: 1024px) 1170px, (min-width: 570px) 1024px, (min-width: 270px) 570px, (min-width: 216px) 270px, 216px" width="1200" height="500" class="attachment-slider-full tc-thumb-type-thumb wp-post-image wp-post-image v-centered" alt="test-site hk day 3" style="width: 1903px; height: auto; top: -146.5px; left: 0px;">
</a>
</div>

(this code is repeated for multiple sides)

Thanks for the help!

Maybe.. $(window).on('resize', function(){ $('#').attr('srcset', ...); }); — Naterade, Jan 12 '16 at 05:54
hmm right now srcset is inserted dynamically and may change, so specifying the srcset manually with window-on-resize may be a bit too tedious — David Z, Jan 12 '16 at 06:00
Thats the name of the game, its coding. If you don't like that, then you can can use css media queries or PHP. Not too many ways around dynamic unless you use a plugin. — Naterade, Jan 12 '16 at 06:04
I was looking for an answer similar to: http://stackoverflow.com/questions/30899271/is-it-possible-to-recalculate-the-srcset-image-used-if-browser-window-is-resiz — David Z, Jan 12 '16 at 06:06

Surya prakash Patel · Answer 1 · 2016-01-13T05:14:21.637

You can use this code inside your window resize event, first u have to declare a array of new image and replace all img src of your slider :

/* defien an array with new image path*/
  newsrc[0] = image1 path;
  newsrc[2] = image2 path;
  newsrc[3] = image3 path;
  newsrc[4] = image4 path;
   /* find all images inside slider */
$('.carousuel-image').find('a.class').each(function(index, element) {       
        $(this).find('img').src('newsrc[index]') ;  
});

For multiple slider you can wrap above code in slider loop.

How use jQuery to reload 'srcset' image when browser is resized?

1 Answers1