You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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:
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:
provide an API hook to allow an ajaxed-in file containing only an <img srcset> to get the CB sizing calcs. Complicated.
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:
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:
provide an API hook to allow an ajaxed-in file containing only an
<img srcset>
to get the CB sizing calcs. Complicated.provide a declarative option, e.g.:
Maybe you have a better attribute name 🐑
Are you interested in this? I can submit a PR if it's helpful.
The text was updated successfully, but these errors were encountered: