[su_lightbox type="image" src="https://placekitten.com/720/480"] Click here to open lightbox with an image [/su_lightbox]
Table of contents
Shortcodes [su_lightbox] and [su_lightbox_content] are used to display various elements in a pop-up window. You can display an image, a web page, or any HTML content.
There are two main parameters defining the functioning of lightbox, type and src.
type parameter specifies the contents type and can have the following values:
image – for images;iframe – for display of web pages in the lightbox window;inline – for display of any HTML content.src parameter defines the contents. This parameter may have the following values:
URL – for display of images or web pages in the lightbox window. Examples: http://example.com/image.jpg (image), http://example.com (web page);CSS selector – for display of any HTML contents. Example: #contact-form.| Option name | Possible values | Default value |
|---|---|---|
| type Select type of the lightbox window content | iframe (Iframe) image (Image) inline (Inline (html content)) | iframe |
| src Insert here URL or CSS selector. Use URL for Iframe and Image content types. Use CSS selector for Inline content type. Example values: http://www.youtube.com/watch?v=XXXXXXXXX – YouTube video (iframe) http://example.com/wp-content/uploads/image.jpg – uploaded image (image) http://example.com/ – any web page (iframe) #my-custom-popup – any HTML content (inline) | Any text value | – none – |
| mobile Set this option to No to disable lightbox on mobile devices (≤768px) | yes or no | yes |
| class Additional CSS class name(s) separated by space(s) | CSS class name(s) separated by space(s) | – none – |
| Option name | Possible values | Default value |
|---|---|---|
| id Enter here the ID from Content source field. Example value: my-custom-popup | Any text value | – none – |
| width Adjust the width for inline content (in pixels or percents). Example values: 300px, 600px, 90% | Any text value | 50% |
| margin Adjust the margin for inline content (in pixels) | Number from 0 to 600 | 40 |
| padding Adjust the padding for inline content (in pixels) | Number from 0 to 600 | 40 |
| text_align Select the text alignment | left (Left) center (Center) right (Right) | center |
| background Pick a background color | #HEX color | #FFFFFF |
| color Pick a text color | #HEX color | #333333 |
| shadow Adjust the shadow for content box | CSS box/text-shadow shorthand property | 0px 0px 15px #333333 |
| class Additional CSS class name(s) separated by space(s) | CSS class name(s) separated by space(s) | – none – |
To display an image in the lightbox set type parameter to image and specify the link to the image you want to show in the src parameter. Shortcode example:
[su_lightbox type="image" src="https://placekitten.com/200/300"] Open lightbox with an image [/su_lightbox]
Use your own URL in the src parameter to show another image.
To display a web page in the lightbox set type parameter to iframe and specify the link to a web page you want to show in the src parameter. Shortcode example:
[su_lightbox type="iframe" src="https://example.com/"] Open lightbox with a web page [/su_lightbox]
Use your own URL in the src parameter to show another page.
[su_lightbox type="inline" src="#my-custom-popup"] Click here to open lightbox with HTML content [/su_lightbox] [su_lightbox_content id="my-custom-popup"] <h3>Custom HTML content</h3> Any <strong>HTML</strong> <em>tags</em> can be used here. Other shortcodes are also [su_highlight]allowed[/su_highlight]. [/su_lightbox_content]
Note that the same identifier my-custom-popup is being used for both shortcodes.
[su_lightbox] shortcode will create an element which will open lightbox upon click. Set type parameter to inline and specify the identifier used in the shortcode [su_lightbox_content] in src parameter.
Use the complementary shortcode [su_lightbox_content] to display HTML content or shortcodes in a lightbox.
This shortcode has various settings like: ID, width, margin, etc. However, we’d like to describe ID parameter in the present article. You should specify CSS block identifier in this parameter. This identifier should be used at insert of [su_lightbox] shortcode as the value of src parameter.
You can use any HTML tags and even other shortcodes inside of both shortcodes.
If you are an advanced developer you can drop auxiliary shortcode [su_lightbox_content]. Instead, just specify the required CSS-selector in the [su_lightbox src=""] shortcode in the src parameter.