{"id":2708,"date":"2023-05-27T23:59:07","date_gmt":"2023-05-27T23:59:07","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/uncategorized\/interactive-components-lightbox\/"},"modified":"2025-10-29T20:50:46","modified_gmt":"2025-10-29T20:50:46","slug":"interactive-components-lightbox","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/interactive-components-lightbox\/","title":{"rendered":"Interactive Components: Lightbox"},"content":{"rendered":"\n<p class=\"\">Watch the video below for more examples:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Let\u2019s Get Started<\/h3>\n\n\n\n<p class=\"\">To start using the Lightbox component, simply drag the Lightbox icon into any container on your page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"664\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-10-1024x664.png\" alt=\"\" class=\"wp-image-7797\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-10-1024x664.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-10-300x195.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-10-768x498.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-10-1536x996.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-10.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">&nbsp;<\/p>\n\n\n\n<p class=\"\">Once in place, you will see a Lightbox container selected with a button in it. The container that is added to the page is the Lightbox container and includes settings to specify what is displayed in the Lightbox window and how.<\/p>\n\n\n\n<p class=\"\">You can publish virtually any type of content into the Lightbox container. So if you want to open the Lightbox when someone clicks an image thumbnail, for example, you can delete the button and drag an image into the Lightbox container.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"267\" height=\"529\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-11.png\" alt=\"\" class=\"wp-image-7799\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-11.png 267w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-11-151x300.png 151w\" sizes=\"auto, (max-width: 267px) 100vw, 267px\" \/><\/figure>\n\n\n\n<p class=\"\">&nbsp;<strong>Open On Page Load<\/strong><\/p>\n\n\n\n<p class=\"\">When this setting is enabled, your Lightbox will load automatically without the need for someone to click anything.<\/p>\n\n\n\n<p class=\"\">You will also see an option to set a delay when this is enabled. If you want the Lightbox to open as soon as the page loads, you can keep this set to 0. If you want the Lightbox to open 5 seconds after the page loads (for example), simply increase the delay to 5.<\/p>\n\n\n\n<p class=\"\">The &#8220;Hide Lightbox Button&#8221; option can be enabled to hide the contents of the Lightbox container when you view the page live. This can be helpful if you want to trigger a Lightbox to open on page load, but do not necessarily want to have a button on the page for respondents to click to open it.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Content<\/strong><\/h4>\n\n\n\n<p class=\"\">The Content settings are where you will specify what to show within the Lightbox.<\/p>\n\n\n\n<p class=\"\">By default, the&nbsp;<strong>URL<\/strong>&nbsp;option is selected. You can use this option to display another page from your creative in the Lightbox or an external site.&nbsp;<\/p>\n\n\n\n<p class=\"\">If you switch to the&nbsp;<strong>Text<\/strong>&nbsp;option, you will be able to open a textbox to type the message you would like to display within your Lightbox window.<\/p>\n\n\n\n<p class=\"\">When the&nbsp;<strong>Image<\/strong>&nbsp;option is used, you will be able to select an image from your console&#8217;s Image Library to display within the Lightbox.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Design<\/strong><\/h4>\n\n\n\n<p class=\"\">There are a ton of design options for the Lightbox window itself. After clicking into the Design tab for your Lightbox container, you will be able to set an animation for the Lightbox when it opens, specify the width and height, adjust the vertical alignment, border radius, the background color, overlay color and more.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"263\" height=\"1016\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-12.png\" alt=\"\" class=\"wp-image-7802\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-12.png 263w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-12-78x300.png 78w\" sizes=\"auto, (max-width: 263px) 100vw, 263px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Behaviors<\/strong><\/h4>\n\n\n\n<p class=\"\">As noted earlier in the post, you can publish any type of content you want within the Lightbox container &#8211; that includes content that you might not want to necessarily trigger the lightbox to open.<\/p>\n\n\n\n<p class=\"\">The &#8220;Open Lightbox&#8221; behavior will need to be applied to each individual element that you want respondents to be able to click in order to open the Lightbox window.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"911\" height=\"411\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-13.png\" alt=\"\" class=\"wp-image-7804\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-13.png 911w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-13-300x135.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-13-768x346.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-13-345x156.png 345w\" sizes=\"auto, (max-width: 911px) 100vw, 911px\" \/><\/figure>\n\n\n\n<p class=\"\"><strong><br>*Note:<\/strong> Anything published within the Lightbox container with this behavior assigned to it will disregard any actions that are assigned to that element and will instead reference the Lightbox container settings for what page to open within the Lightbox window.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"\">If you have any questions, please contact us on <a href=\"mailto:help@ioninteractive.com\" rel=\"nofollow\">help@ioninteractive.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Watch the video below for more examples: Let\u2019s Get Started To start using the Lightbox component, simply drag the Lightbox icon into any container on your page. &nbsp; Once in place, you will see [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5625,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[1056,9],"tags":[2266],"class_list":["post-2708","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lightbox-component","category-the-interactive-components","tag-lightbox"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2708","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=2708"}],"version-history":[{"count":4,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2708\/revisions"}],"predecessor-version":[{"id":8047,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2708\/revisions\/8047"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5625"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=2708"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=2708"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=2708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}