{"id":44063,"date":"2026-05-21T14:46:42","date_gmt":"2026-05-21T14:46:42","guid":{"rendered":"https:\/\/getshortcodes.com\/?post_type=demo-modal&p=44063"},"modified":"2026-05-22T09:00:13","modified_gmt":"2026-05-22T09:00:13","slug":"lightbox","status":"publish","type":"demo-modal","link":"https:\/\/getshortcodes.com\/demo-modal\/lightbox\/","title":{"rendered":"Lightbox"},"content":{"rendered":"\n

Lightbox with an Image<\/h2>\n\n\n\n Open lightbox with an image <\/span><\/a>\n<\/span>\n\n\n\n
Shortcode<\/summary>\n
[su_lightbox type=\"image\" src=\"https:\/\/placehold.co\/600x400?text=Example+Image\"]\n[su_button] Open lightbox with an image [\/su_button]\n[\/su_lightbox]<\/code><\/pre>\n<\/details>\n\n\n\n
Lightbox with a Webpage (Iframe)<\/h2>\n\n\n\n  Open lightbox with example.com <\/span><\/a>\n<\/span>\n\n\n\n
Shortcode<\/summary>\n
[su_lightbox type=\"image\" src=\"https:\/\/example.com\/\" type=\"iframe\"]\n[su_button] Open lightbox with example.com [\/su_button]\n[\/su_lightbox]<\/code><\/pre>\n<\/details>\n\n\n\n
Lightbox with a YouTube Video<\/h2>\n\n\n\n  Open lightbox with a YouTube video <\/span><\/a>\n<\/span>\n\n\n\n
Shortcode<\/summary>\n
[su_lightbox type=\"iframe\" src=\"https:\/\/www.youtube.com\/watch?v=bcQh3b0LJyk\"]\n[su_button] Open lightbox with a YouTube video [\/su_button]\n[\/su_lightbox]<\/code><\/pre>\n<\/details>\n\n\n\n
Lightbox with Custom Inline Content<\/h2>\n\n\n\n  Open lightbox with custom HTML content and shortcodes <\/span><\/a>\n<\/span>\n
\n
Custom HTML content<\/h3>\n
Any HTML<\/strong> tags<\/em> can be used here. Other shortcodes are also  allowed <\/span>.<\/p>\n<\/div>\n\n\n\n
Shortcode<\/summary>\n
[su_lightbox type=\"inline\" src=\"#my-custom-popup\"]\n[su_button] Open lightbox with custom HTML content and shortcodes [\/su_button]\n[\/su_lightbox]\n\n[su_lightbox_content id=\"my-custom-popup\"]\n\n<h3>Custom HTML content<\/h3>\n\nAny <strong>HTML<\/strong> <em>tags<\/em> can be used here. Other shortcodes are also [su_highlight]allowed[\/su_highlight].\n\n[\/su_lightbox_content]<\/code><\/pre>\n<\/details>\n\n\n\n
Custom Trigger Element<\/h2>\n\n\n\n
You can wrap any element with the lightbox shortcode to make it open a lightbox<\/p>\n\n\n\n  WATCH VIDEO  <\/span>\n<\/span>\n\n\"Open
\n<\/span>\n\n\n\n
Shortcode<\/summary>\n
[su_lightbox type=\"iframe\" src=\"https:\/\/www.youtube.com\/watch?v=bcQh3b0LJyk\"]\n[su_highlight] WATCH VIDEO [\/su_highlight]\n[\/su_lightbox]\n\n[su_lightbox type=\"image\" src=\"https:\/\/placehold.co\/600x400?text=Example+Image\"]\n<img src=\"https:\/\/placehold.co\/400x100?text=Open+Lightbox\" alt=\"Open Lightbox\" \/>\n[\/su_lightbox]<\/code><\/pre>\n<\/details>\n\n\n\n
Using with Forms<\/h2>\n\n\n\n
If your form has shortcode, you can show that shortcode inside of a lightbox. See the example below:<\/p>\n\n\n\n  CONTACT US <\/span><\/a>\n<\/span>\n
\n[YOUR_CONTACT_FORM_SHORTCODE]\n<\/div>\n\n\n\n
Shortcode<\/summary>\n
[su_lightbox type=\"inline\" src=\"#my-contact-form-lightbox\"]\n[su_button] CONTACT US [\/su_button]\n[\/su_lightbox]\n\n[su_lightbox_content id=\"my-contact-form-lightbox\"]\n[YOUR_CONTACT_FORM_SHORTCODE]\n[\/su_lightbox_content]<\/code><\/pre>\n<\/details>\n","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":false},"class_list":["post-44063","demo-modal","type-demo-modal","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/demo-modal\/44063","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/demo-modal"}],"about":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/types\/demo-modal"}],"wp:attachment":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/media?parent=44063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}