Add support for srcset.

[albell]

Hey Jack,

I'd like to be able to use colorbox with srcset. The idea is to supply multiple resolutions on an <img> tag, without using <picture>. I'm sure you know all about this but for those who don't:

http://blog.cloudfour.com/dont-use-picture-most-of-the-time/
http://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
http://caniuse.com/#feat=srcset

(It's in Blink now, and behind a pref in Gecko.)

Basically, the current "retina" option doesn't really suffice across the entire device spectrum. From old phones to 4K monitors to 3x tablets, it's often no longer possible to split up images into simple retina and non-retina. One either winds up brutally slowing the mobile experience or handing desktops compromised files and/or double downloads.

I experimented a little with loading imgs as inline content, e.g. an html file containing only:

<img class="cboxPhoto"
     src="mypic-sm.jpg"
     srcset="mypic-md.jpg 600w, mypic-lg.jpg 1200w mypic-xl 2400w"
>

but of course this doesn't really work, because the CB sizing calculations are just completely different for images versus inline code. And I don't want to hardcode a CSS value, because I need responsive behavior. Also, it's not possible to force markup to be be processed internally by CB as an img. So I see two options:

1. provide an API hook to allow an ajaxed-in file containing only an <img srcset> to get the CB sizing calcs. Complicated.

2. provide a declarative option, e.g.:

<a href="mypic-sm.jpg" data-cb-srcset="mypic-md.jpg 600w, mypic-lg.jpg 1200w mypic-xl 2400w">

Maybe you have a better attribute name 🐑

Are you interested in this? I can submit a PR if it's helpful.

[jackmoore]

Yeah, I had the same thought earlier today due to the Chrome release. I'll look into it.