Lightbox

Click here to open lightbox with an image

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

Table of contents

  1. Description
  2. Options
    1. [su_lightbox] – the primary shortcode
    2. [su_lightbox_content] – the complementary shortcode
  3. Examples
    1. Displaying images
    2. Displaying web pages
    3. Displaying HTML content

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:

src parameter defines the contents. This parameter may have the following values:

[su_lightbox] – the primary shortcode

typeSelect type of the lightbox window content

Default value: iframe
srcInsert 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)
mobileSet this option to No to disable lightbox on mobile devices (≤768px)

Possible values: yes or no

Default value: yes
classAdditional CSS class name(s) separated by space(s)

[su_lightbox_content] – the complementary shortcode

idThe ID of the element. Use the value from the Content source field of the lightbox shortcode. Example: my-custom-popup
widthThe width of the element. CSS units are allowed.
Examples: auto, 300px, 40em, 90%, 90vw

Default value: auto
min_widthThe minimum width of the element. CSS units are allowed.
Examples: none, 300px, 40em, 90%, 90vw

Default value: none
max_widthThe maximum width of the element. CSS units are allowed.
Examples: none, 300px, 40em, 90%, 90vw

Default value: 600px
marginThe outer spacing of the element (in pixels)

Possible values: Number from 0 to 600

Default value: 40
paddingThe inner spacing of the element (in pixels)

Possible values: Number from 0 to 600

Default value: 40
text_alignSelect the text alignment

Possible values: left, center, right

Default value: center
backgroundPick a background color

Possible values: #HEX color

Default value: #FFFFFF
colorPick a text color

Possible values: #HEX color

Default value: #333333
shadowAdjust the shadow for content box

Possible values: CSS box/text-shadow shorthand property

Default value: 0px 0px 15px #333333
classAdditional CSS class name(s) separated by space(s)

Examples

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 an image

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

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 a web page

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

Displaying HTML content

Click here to open lightbox with HTML content

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

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.

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.

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.

Helpful?
🤝 Thank you!