CSS-Only Lightbox

FAQ

How do I add a lightbox?

1. Copy and paste the complete URL for the image you want to make a lightbox for into the WordPress editor
2. Select the URL with your cursor
3. Click the « Lightbox » button in the TinyMCE toolbar
4. Enter the values you’re prompted for. The only one that’s required is a unique ID for the image

OR

1. Copy and paste the complete URL for the image you want to make a lightbox for into the WordPress editor
2. Add the opening shortcode, [css_lightbox …] before the beginning of the URL and add the options you want
3. Attributes you can use with the shortcode are:

* « id » (unique identifier for the image, required)
* « height » (in pixels, without including px)
* « width » (in pixels, without including px)
* « title » (a title for image, displayed when it’s enlarged)
* « caption » (a caption for the image, displayed when it’s enlarged)
* « alt » (alt text for the on-page image)
* « icon » (‘true’ or ‘false’ – whether or not to include a small magnifying glass icon in the top-left of the on-page image, to indicate that it can be enlarged)
1. An example using all of the available options: [css_lightbox id= »uniqueID » height= »400″ width= »400″ title= »A title » caption= »A caption » alt= »Some alt text » icon= »true »]Image URL[/css_lightbox]

What features are coming?

• The option to use other units for the image dimension, including %, em, rem, vw, and vh
• Send me suggestions in the support forum!