Shortcodes Ultimate

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

Description
Options
1. [su_lightbox] – the primary shortcode
2. [su_lightbox_content] – the complementary shortcode
Examples

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

type	Select type of the lightbox window content Default value: `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)
mobile	Set this option to No to disable lightbox on mobile devices (≤768px) Possible values: `yes` or `no` Default value: `yes`
class	Additional CSS class name(s) separated by space(s)

[su_lightbox_content] – the complementary shortcode

id	The ID of the element. Use the value from the Content source field of the lightbox shortcode. Example: `my-custom-popup`
width	The width of the element. CSS units are allowed. Examples: `auto`, `300px`, `40em`, `90%`, `90vw` Default value: `auto`
min_width	The minimum width of the element. CSS units are allowed. Examples: `none`, `300px`, `40em`, `90%`, `90vw` Default value: `none`
max_width	The maximum width of the element. CSS units are allowed. Examples: `none`, `300px`, `40em`, `90%`, `90vw` Default value: `600px`
margin	The outer spacing of the element (in pixels) Possible values: Number from 0 to 600 Default value: `40`
padding	The inner spacing of the element (in pixels) Possible values: Number from 0 to 600 Default value: `40`
text_align	Select the text alignment Possible values: `left`, `center`, `right` Default value: `center`
background	Pick a background color Possible values: #HEX color Default value: `#FFFFFF`
color	Pick a text color Possible values: #HEX color Default value: `#333333`
shadow	Adjust the shadow for content box Possible values: CSS box/text-shadow shorthand property Default value: `0px 0px 15px #333333`
class	Additional 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: 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.

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!

Lightbox