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] – 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

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 –
mobile
Set this option to No to disable lightbox on mobile devices (≤768px)
yes or noyes
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 –

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!