How to use lightbox shortcode

Using the shortcodes [su_lightbox] and [su_lightbox_content] you can display various elements in a pop-up window. You can show both the image and a web page or any HTML content.

Shortcode parameters

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.

Images

To display an image in the lightbox set type parameter to image and specify the link to image you want to show in src parameter. Shortcode example:

[su_lightbox type="image" src="http://lorempixel.com/400/400/"] Open lightbox with image [/su_lightbox]

* Don't forget to change the link in src parameter

Web pages

To display a web page in the lightbox set type parameter to iframe and specify the link to web page you want to show in src parameter. Shortcode example:

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

* Don't forget to change the link in src parameter

HTML content

Shortcode [su_lightbox_content]

To display any HTML contents in the lightbox you should use auxiliary shortcode [su_lightbox_content]. This shortcode should contain the contents you want to show in the lightbox window.

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.

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.

Example of shortcodes application

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

Please 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 [su_lightbox src=""] shortcode in src parameter.