How to open a correct img from srcset in a new window?

Question

I am trying to open an image in a new window and load the correct image based on srcset in order to open the right image size based on resolution

html:

<div class="gallery-cell">
   <img alt="100%x200" data-srcset="https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg 240w, https://farm4.staticflickr.com/3059/2835191823_e3636abb34_n.jpg 320w, https://farm4.staticflickr.com/3059/2835191823_e3636abb34.jpg 500w, https://farm4.staticflickr.com/3059/2835191823_e3636abb34_z.jpg 640w, https://farm4.staticflickr.com/3059/2835191823_e3636abb34_b.jpg 1920w" data-sizes="100%" sizes="100%" srcset="https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg 240w, https://farm4.staticflickr.com/3059/2835191823_e3636abb34_n.jpg 320w, https://farm4.staticflickr.com/3059/2835191823_e3636abb34.jpg 500w, https://farm4.staticflickr.com/3059/2835191823_e3636abb34_z.jpg 640w, https://farm4.staticflickr.com/3059/2835191823_e3636abb34_b.jpg 1920w">
</div>

jQuery

$(".gallery-cell").on("click", function(e){
   e.preventDefault();
   var img_to_load = $(this).find('img').attr('data-srcset');
   var $str = img_to_load.split(' ');
   var $retina = $str[0];
   imgWindow = window.open(img_to_load, 'imgWindow');
});

The above doesn't open different images based on resolutions but this https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg

I believe is because of $str[0]; yet I have tried not to insert an index [0] and that takes me to a not found image

Example: http://codepen.io/aFarkas/pen/OVoavw

Something like that comment [jQuery : select all element with custom attribute](http://stackoverflow.com/questions/13392463/jquery-select-all-element-with-custom-attribute) `$("img[data-srcset]")` — Quake1TF, Feb 25 '16 at 14:10
`` right selector do th thing: http://codepen.io/anon/pen/wGvbXL — Quake1TF, Feb 29 '16 at 06:26

score 2 · Accepted Answer · answered Feb 26 '16 at 09:01

2

The solution is to use .currentSrc

    $(".gallery-cell").on("click", function(e){
       e.preventDefault();
       var src = $(this).find('img').get(0).currentSrc; // get DOM element's currentSrc
       imgWindow = window.open(src, 'imgWindow');
    });

answered Feb 26 '16 at 09:01

rob.m

9,843
19
73
162

Is there a solution for Safari & friends ? https://caniuse.com/#feat=mdn-api_htmlimageelement_currentsrc – nathan Jan 05 '20 at 03:06
@nathan https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentSrc – rob.m Jan 08 '20 at 08:46
Image element and Media element's availability is different: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/currentSrc (unfortunately) – nathan Jan 08 '20 at 14:30
@nathan ehm not sure then, was an old project, wonder if it worked on safari, by what you've said then I didn't test it back then – rob.m Jan 09 '20 at 14:10

score 0 · Answer 2 · edited May 23 '17 at 11:59

When you perform these 2 steps:

var $str = img_to_load.split(' ');
var $retina = $str[0];

you will always end up with https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg based on the string in data-srcset. This is because in the first step you create an array by splitting the string by spaces and in the second step you access the first element in the array. So $str[0] is https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg, $str[1] is 240w, and so on.

To get the required part of this string you would have to do some complex string operations, so I suggest you use a different approach. Instead of having

data-srcset="https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg 240w, https://farm4.staticflickr.com/3059/2835191823_e3636abb34_n.jpg 320w, https://farm4.staticflickr.com/3059/2835191823_e3636abb34.jpg 500w, https://farm4.staticflickr.com/3059/2835191823_e3636abb34_z.jpg 640w, https://farm4.staticflickr.com/3059/2835191823_e3636abb34_b.jpg 1920w"

why not split it up into separate parts like this:

data-srcset-240w="https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg"
data-srcset-320w="https://farm4.staticflickr.com/3059/2835191823_e3636abb34_n.jpg"

and so on. Once you've done that you can just access the required part like this, for example if you need the 240w image:

var img_to_load = $(this).find('img').attr('data-srcset-240w');

Now of course you would also have to define some rules to see in which case you would load which image. For instance to determine the screen resolution you could use something like this https://stackoverflow.com/a/2242100/3353542, and then check against those values to serve the correct images.

Interesting, I didn't know about currentSrc... Looks useful. — ilokhov, Feb 26 '16 at 11:09

How to open a correct img from srcset in a new window?

2 Answers2