Cloudinary Lightbox
A JavaScript widget for auto-generating responsive, accessible lightboxes using Cloudinary.
Installing
Using a CDN
The quickest way to get started is to add the minified production bundles from the Unpkg CDN:
Place the following default theme CSS before the closing </head> tag:
Place the following script before the closing </body> tag:
Using NPM
If you're looking to include the plugin as a part of your build process, install using NPM:
npm install cloudinary-lightbox
Then include the files as necessary in your app entrypoint, e.g in Parceljs:
import CloudinaryLightbox from "cloudinary-lightbox"
import "cloudinary-lightbox/dist/cloudinaryLightbox.css"
const cloudinaryLightbox = new CloudinaryLightbox({
cloudName: "YOUR_CLOUD_NAME"
})
Usage
Cloudinary Lightbox is plug-and-play out of the box. The default stylesheet will give you fullscreen image lightboxes for every image you select when instantiating the plugin.
Configuration
When instantiating the plugin, the following options are available:
| Name | Type | Description | Default |
|---|---|---|---|
selectors |
string |
A comma delimited list of valid CSS selectors to target specific images | img |
attributes.src |
string |
The HTML attribute to search for the image src value from. |
src |
attributes.transforms |
string |
The HTML attribute to search for Cloudinary transform values on. Must be a comma delimited list of valid Cloudinary transforms. | data-clb-transforms |
cname |
string |
The domain name that Cloudinary URLs should be constructed with. | res.cloudinary.com |
privateCdn |
boolean |
Whether a private CDN is being used. For advanced tier Cloudinary users only | false |
secure |
boolean |
Whether to use https protocol, even if the viewed webpage is http |
true |
wrapperSelectors |
string |
A comma delimited list of valid CSS selectors to source transforms from. Useful for markdown content. | undefined |
template |
string |
A valid mustachejs template for rendering the lightbox. Use the {{{ image }}} variable to place the generated image. |
Default template |
transforms |
string |
The default transforms to apply if none are set using attributes.transforms |
w_auto,c_scale,dpr_auto |
Custom Styling (CSS)
If you want to customize the CSS for the lightbox, feel free to exclude or extend the very basic default theme with your own CSS.
Client Hints
By default, this plugin is setup to deliver the best image possible via client hints. To enable this functionality, add the following to the <head> of your page:
<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width">
Contributors
Thanks goes to these wonderful people (emoji key):
 chrisdmacrae 💻 |
|---|
This project follows the all-contributors specification. Contributions of any kind welcome!