search

jackmoore / colorbox

A light-weight, customizable lightbox plugin for jQuery
http://www.jacklmoore.com/colorbox/
MIT License
4.75k stars 1.14k forks source link

Force SVG content as non-photo? #900

Open sheffieldnikki opened 3 years ago

sheffieldnikki commented 3 years ago

By default Colorbox uses a URL regexp to treat certain content as a photo, so for example .jpg, .png, .svg, etc all end up in an IMG tag. And the photo:true option overrides the regexp to allow other URLs to be treated as a photo: http://www.jacklmoore.com/colorbox/#setting-photo

However there isn't an option to NOT treat content as a photo. My use case is an SVG file that needs to load as an SVG tag, not as an IMG tag. It would be great if the photo option had 3 values:

  1. unset (default) to use the regexp to guess whether content was a photo or not
  2. photo:true to force content to be treated as a photo
  3. photo:false to force content to NOT be treated as a photo

A workaround is to explicitly set the photoRegex option to exclude the URLs you don't want treated as photos:

$('A.gallery').colorbox({rel:'gal', photoRegex: /\.(gif|png|jp(e|g|eg)|bmp|ico|webp|jxr)((#|\?).*)?$/i});

another workaround would be to rename the .svg file to something else, but that means the content-type is wrong, a server/CDN may not compress it, you can't link directly the file (non-javascript fallback), etc.

jackmoore commented 3 years ago

Good job changing the photoRegex, that was the right way to work around that. The photoRegex doesn't have to be complicated if you know it's not a photo (e.g. /.^/). I like your suggestion, but I'm probably not going to make API changes at this point.

Metztli commented 11 hours ago

Hello-

Came to this topic via a web search. I am using a recently orphaned PHP blog app where colorbox was integrated to provide support for enlarging of images in skins used for posts, i.e., a colorbox checkbox is shown in the skins settings.

Fact is the PHP app is able to display WebP images natively -- with a few modifications to its code, of course; notwithstanding, when utilizing the colorbox support in a given skin, instead of an image all is shown is awful chars: colorbox-WebP

Perusing your site, the Setting 'photoRegex' is not even there anymore. Thus, colorbox does not support WebP, is the writing on your wall?

Thanks.