Click here to open lightbox

[su_lightbox type="image" src="https://placekitten.com/720/480"] Click here to open lightbox [/su_lightbox]

Description

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.

Options

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.

[su_lightbox] – the primary shortcode

Option namePossible valuesDefault 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 –
class
Additional CSS class name(s) separated by space(s)
CSS class name(s) separated by space(s)– none –

[su_lightbox_content] – complementary shortcode

Option namePossible valuesDefault 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 value50%
margin
Adjust the margin for inline content (in pixels)
Number from 0 to 60040
padding
Adjust the padding for inline content (in pixels)
Number from 0 to 60040
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 property0px 0px 15px #333333
class
Additional CSS class name(s) separated by space(s)
CSS class name(s) separated by space(s)– none –

Displaying images

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:

Open lightbox with image

[su_lightbox type="image" src="https://placekitten.com/200/300"] Open lightbox with image [/su_lightbox]

Do not forget to change the link in the src parameter.

Displaying web pages

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:

Open lightbox with web page

[su_lightbox type="iframe" src="https://example.com/"] Open lightbox with web page [/su_lightbox]

Do not forget to change the link in the src parameter

Displaying HTML content

Shortcode [su_lightbox_content]

Use the complementary shortcode [su_lightbox_content] to display HTML content or shortcodes in a lightbox.

This shortcode has various settings like: IDwidthmargin, 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.

Shortcode [su_lightbox]

[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.

Usage example

Open lightbox with custom HTML content

[su_lightbox type="inline" src="#my-custom-popup"] Open lightbox with custom HTML content [/su_lightbox]

[su_lightbox_content id="#my-custom-popup"] This content will be displayed in lightbox [/su_lightbox_content]

Note that the same identifier with the number sign #my-custom-popup is used in both shortcodes.

Additional information

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.