如何在新窗口中从srcset打开正确的img？

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

Answer 1

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');
    });

Answer 2

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.