Launch Lightbox gallery from button click – Themeco Community https://theme.co/archive/forums/topic/launch-lightbox-gallery-from-button-click/feed/ Sat, 11 Oct 2025 12:54:07 +0000 https://bbpress.org/?v=2.6.14 en-US https://theme.co/archive/forums/topic/launch-lightbox-gallery-from-button-click/#post-65226 <![CDATA[Launch Lightbox gallery from button click]]> https://theme.co/archive/forums/topic/launch-lightbox-gallery-from-button-click/#post-65226 Sat, 05 Jul 2014 12:17:05 +0000 Abhay B I want to launch an lightbox image gallery from a button click. Is there any way to achieve this? Would greatly appreciate some assistance.

]]> https://theme.co/archive/forums/topic/launch-lightbox-gallery-from-button-click/#post-65537 <![CDATA[Reply To: Launch Lightbox gallery from button click]]> https://theme.co/archive/forums/topic/launch-lightbox-gallery-from-button-click/#post-65537 Sun, 06 Jul 2014 13:57:44 +0000 Christian Hey Abhay,

That is possible. Just add a class to the button like [button class="your-class"] and use that class in the lightbox shortcode like [lightbox selector=".your-class"].

Hope that helps. Let us know if you need further assistance.

]]> https://theme.co/archive/forums/topic/launch-lightbox-gallery-from-button-click/#post-65719 <![CDATA[Reply To: Launch Lightbox gallery from button click]]> https://theme.co/archive/forums/topic/launch-lightbox-gallery-from-button-click/#post-65719 Mon, 07 Jul 2014 02:26:59 +0000 Abhay B Hi, Thanks for your response. But my requirement is as follows:

I have a bunch of images, i.e. a gallery. They must not be displayed as thumbnails on the page.
I have a button on that page that upon click will open a lightbox with navigation for all the images in the gallery.

Can I have a code snippet or some steps to achieve this? I have a problem with the gallery part, and it being invisible as thumbnails

]]> https://theme.co/archive/forums/topic/launch-lightbox-gallery-from-button-click/#post-66085 <![CDATA[Reply To: Launch Lightbox gallery from button click]]> https://theme.co/archive/forums/topic/launch-lightbox-gallery-from-button-click/#post-66085 Mon, 07 Jul 2014 22:34:27 +0000 Rob D Looking for the same ability.

]]> https://theme.co/archive/forums/topic/launch-lightbox-gallery-from-button-click/#post-66087 <![CDATA[Reply To: Launch Lightbox gallery from button click]]> https://theme.co/archive/forums/topic/launch-lightbox-gallery-from-button-click/#post-66087 Mon, 07 Jul 2014 23:00:41 +0000 Rob D Hi Abhay –

This was my fix:

Add a single Image Shortcode. (be sure to check the box to make it a Link)
Give it a Class (lightboximages)
Add a new Content band, give it a Class (lightboximagestohide)
Add an Image Shortcode for each image that should be displayed in the lightbox. Have them all in the new Content Band. Make sure each has the Class set (lightboximages)
Add another Content Band and add the Responsive Lightbox Shortcode and set the Selector to .lightboximages
….at this point, all the image show on the page and the first one acts as a trigger to the lightbox
Add in Customizer (under Custom CSS):
.lightboximagestohide { display: none; }
..now all the images in the second Content Band are hidden, but clicking on the first image launches the entire lightbox.

This is explained in the walkthrough link provided, but was not clear until I did it. Hope this helps you!

]]> https://theme.co/archive/forums/topic/launch-lightbox-gallery-from-button-click/#post-66113 <![CDATA[Reply To: Launch Lightbox gallery from button click]]> https://theme.co/archive/forums/topic/launch-lightbox-gallery-from-button-click/#post-66113 Tue, 08 Jul 2014 02:12:20 +0000 Christian Thanks for sharing Rob. Additionally, you could place your gallery in a [container] shortcode with an inline style of display none so that would look like

[container style="display:none"] Your Gallery [/container]

Hope that helps. 🙂

]]> https://theme.co/archive/forums/topic/launch-lightbox-gallery-from-button-click/#post-66155 <![CDATA[Reply To: Launch Lightbox gallery from button click]]> https://theme.co/archive/forums/topic/launch-lightbox-gallery-from-button-click/#post-66155 Tue, 08 Jul 2014 05:39:30 +0000 Abhay B Dear Rob and the X Team

First of all – Thank you so much Rob, for sharing a very detailed response. I am close to cracking the problem.

I have followed your instructions, using the content band. However, when the lightbox opens up, the first image displays correctly. Subsequently, the other images are only loaded below as thumbnails, but the page (or some iframe) loads in the lightbox.

Can you please have a look at the problem? Its on my site URL: http://www.we45.com/proto/weassure
In the accordion, you need to click the appFortify accordion and click on big “we45” image there to simulate the issue. I dont know what went wrong.

Sorry for asking so many times, but I am a WordPress Newbie 🙁

]]> https://theme.co/archive/forums/topic/launch-lightbox-gallery-from-button-click/#post-66157 <![CDATA[Reply To: Launch Lightbox gallery from button click]]> https://theme.co/archive/forums/topic/launch-lightbox-gallery-from-button-click/#post-66157 Tue, 08 Jul 2014 05:46:09 +0000 Abhay B Update:

Guys – I was able to solve it. I hadnt included the href values. Rookie mistake 🙂

Anyway here’s the code if anyone else has the same problem in the future

[image class="lightboximages" src="http://www.example.com/wp-content/uploads/2014/06/image1.001.png" alt="Alt Text" type="rounded, circle, thumbnail, none" float="left, right, none" link="true" href="#"title="Title" target="blank" info="tooltip, popover" info_place="top, right, bottom, left" info_trigger="hover, click, focus" info_content="This content will only show up if you have decided to show a popover." lightbox_thumb="http://yourdomain.com/path/to/your/image.jpg" lightbox_video="false" lightbox_caption="This content will only show up if you use a lightbox"]

[content_band class="lightboximagestohide" inner_container="true" no_margin="true" border="none, top, left, right, bottom, vertical, horizontal, all" padding_top="40px" padding_bottom="40px" bg_pattern="" bg_image="" parallax="true" bg_video="" bg_video_poster=""] [image class="lightboximages" src="http://www.example.com/wp-content/uploads/2014/06/image1.002.png" alt="Alt Text" type="rounded, circle, thumbnail, none" float="left, right, none" link="true" href="http://www.example.com/wp-content/uploads/2014/06/image1.002.png" title="Title" target="blank" info="tooltip, popover" info_place="top, right, bottom, left" info_trigger="hover, click, focus" info_content="This content will only show up if you have decided to show a popover." lightbox_thumb="http://www.example.com/wp-content/uploads/2014/06/image1.002.png" lightbox_video="false" lightbox_caption="This content will only show up if you use a lightbox"][image class="lightboximage" src="http://www.example.com/wp-content/uploads/2014/06/image1.003.png" alt="Alt Text" type="rounded, circle, thumbnail, none" float="left, right, none" link="true" href="http://www.example.com/wp-content/uploads/2014/06/image1.003.png" title="Title" target="blank" info="tooltip, popover" info_place="top, right, bottom, left" info_trigger="hover, click, focus" info_content="This content will only show up if you have decided to show a popover." lightbox_thumb="http://www.example.com/wp-content/uploads/2014/06/image1.003.png" lightbox_video="true" lightbox_caption="This content will only show up if you use a lightbox"][image class="lightboximages" src="http://www.example.com/wp-content/uploads/2014/06/image1.004.png" alt="Alt Text" type="rounded, circle, thumbnail, none" float="left, right, none" link="true" href="http://www.example.com/wp-content/uploads/2014/06/image1.004.png" title="Title" target="blank" info="tooltip, popover" info_place="top, right, bottom, left" info_trigger="hover, click, focus" info_content="This content will only show up if you have decided to show a popover." lightbox_thumb="http://www.example.com/wp-content/uploads/2014/06/image1.004.png" lightbox_video="false" lightbox_caption="This content will only show up if you use a lightbox"][image class="lightboximage" src="http://www.example.com/wp-content/uploads/2014/06/image1.005.png" alt="Alt Text" type="rounded, circle, thumbnail, none" float="left, right, none" link="true" href="http://www.example.com/wp-content/uploads/2014/06/image1.005.png" title="Title" target="blank" info="tooltip, popover" info_place="top, right, bottom, left" info_trigger="hover, click, focus" info_content="This content will only show up if you have decided to show a popover." lightbox_thumb="http://www.example.com/wp-content/uploads/2014/06/image1.005.png" lightbox_video="false" lightbox_caption="This content will only show up if you use a lightbox"][image class="lightboximages" src="http://www.example.com/wp-content/uploads/2014/06/image1.006.png" alt="Alt Text" type="rounded, circle, thumbnail, none" float="left, right, none" link="true" href="http://www.example.com/wp-content/uploads/2014/06/image1.006.png" title="Title" target="blank" info="tooltip, popover" info_place="top, right, bottom, left" info_trigger="hover, click, focus" info_content="This content will only show up if you have decided to show a popover." lightbox_thumb="http://www.example.com/wp-content/uploads/2014/06/image1.006.png" lightbox_video="false" lightbox_caption="This content will only show up if you use a lightbox"][image class="lightboximages" src="http://www.example.com/wp-content/uploads/2014/06/image1.007.png" alt="Alt Text" type="rounded, circle, thumbnail, none" float="left, right, none" link="true" href="http://www.example.com/wp-content/uploads/2014/06/image1.007.png" title="Title" target="blank" info="tooltip, popover" info_place="top, right, bottom, left" info_trigger="hover, click, focus" info_content="This content will only show up if you have decided to show a popover." lightbox_thumb="http://www.example.com/wp-content/uploads/2014/06/image1.007.png" lightbox_video="false" lightbox_caption="This content will only show up if you use a lightbox"][image class="lightboximages" src="http://www.example.com/wp-content/uploads/2014/06/image1.008.png" alt="Alt Text" type="rounded, circle, thumbnail, none" float="left, right, none" link="true" href="http://www.example.com/wp-content/uploads/2014/06/image1.008.png" title="Title" target="blank" info="tooltip, popover" info_place="top, right, bottom, left" info_trigger="hover, click, focus" info_content="This content will only show up if you have decided to show a popover." lightbox_thumb="http://www.example.com/wp-content/uploads/2014/06/image1.008.png" lightbox_video="false" lightbox_caption="This content will only show up if you use a lightbox"][image class="lightboximages" src="http://www.example.com/wp-content/uploads/2014/06/image1.009.png" alt="Alt Text" type="rounded, circle, thumbnail, none" float="left, right, none" link="true" href="http://www.example.com/wp-content/uploads/2014/06/image1.009.png" title="Title" target="blank" info="tooltip, popover" info_place="top, right, bottom, left" info_trigger="hover, click, focus" info_content="This content will only show up if you have decided to show a popover." lightbox_thumb="http://www.example.com/wp-content/uploads/2014/06/image1.009.png" lightbox_video="false" lightbox_caption="This content will only show up if you use a lightbox"][image class="lightboximages" src="http://www.example.com/wp-content/uploads/2014/06/image1.010.png" alt="Alt Text" type="rounded, circle, thumbnail, none" float="left, right, none" link="true" href="http://www.example.com/wp-content/uploads/2014/06/image1.010.png" title="Title" target="blank" info="tooltip, popover" info_place="top, right, bottom, left" info_trigger="hover, click, focus" info_content="This content will only show up if you have decided to show a popover." lightbox_thumb="http://www.example.com/wp-content/uploads/2014/06/image1.010.png" lightbox_video="false" lightbox_caption="This content will only show up if you use a lightbox"][image class="lightboximages" src="http://www.example.com/wp-content/uploads/2014/06/image1.011.png" alt="Alt Text" type="rounded, circle, thumbnail, none" float="left, right, none" link="true" href="http://www.example.com/wp-content/uploads/2014/06/image1.011.png" title="Title" target="blank" info="tooltip, popover" info_place="top, right, bottom, left" info_trigger="hover, click, focus" info_content="This content will only show up if you have decided to show a popover." lightbox_thumb="http://www.example.com/wp-content/uploads/2014/06/image1.011.png" lightbox_video="false" lightbox_caption="This content will only show up if you use a lightbox"][image class="lightboximages" src="http://www.example.com/wp-content/uploads/2014/06/image1.012.png" alt="Alt Text" type="rounded, circle, thumbnail, none" float="left, right, none" link="true" href="http://www.example.com/wp-content/uploads/2014/06/image1.012.png" title="Title" target="blank" info="tooltip, popover" info_place="top, right, bottom, left" info_trigger="hover, click, focus" info_content="This content will only show up if you have decided to show a popover." lightbox_thumb="http://www.example.com/wp-content/uploads/2014/06/image1.012.png" lightbox_video="false" lightbox_caption="This content will only show up if you use a lightbox"][image class="lightboximages" src="http://www.example.com/wp-content/uploads/2014/06/case_study.png" alt="Alt Text" type="rounded, circle, thumbnail, none" float="left, right, none" link="true" href="http://www.example.com/wp-content/uploads/2014/06/case_study.png" title="Title" target="blank" info="tooltip, popover" info_place="top, right, bottom, left" info_trigger="hover, click, focus" info_content="This content will only show up if you have decided to show a popover." lightbox_thumb="http://www.example.com/wp-content/uploads/2014/06/case_study.png" lightbox_video="false" lightbox_caption="This content will only show up if you use a lightbox"][/content_band]

[content_band inner_container="true" no_margin="true" border="none, top, left, right, bottom, vertical, horizontal, all" padding_top="40px" padding_bottom="40px" bg_pattern="" bg_image="" parallax="true" bg_video="" bg_video_poster=""][lightbox selector=".lightboximages" deeplink="false" opacity="0.85" prev_scale="0.65" prev_opacity="0.75" next_scale="0.65" next_opacity="0.75" orientation="horizontal" thumbnails="true"][/content_band]
]]> https://theme.co/archive/forums/topic/launch-lightbox-gallery-from-button-click/#post-66541 <![CDATA[Reply To: Launch Lightbox gallery from button click]]> https://theme.co/archive/forums/topic/launch-lightbox-gallery-from-button-click/#post-66541 Wed, 09 Jul 2014 05:03:20 +0000 Christian Glad you’ve figured it out Abhay.

]]> https://theme.co/archive/forums/topic/launch-lightbox-gallery-from-button-click/#post-143524 <![CDATA[Reply To: Launch Lightbox gallery from button click]]> https://theme.co/archive/forums/topic/launch-lightbox-gallery-from-button-click/#post-143524 Wed, 12 Nov 2014 18:02:21 +0000 Tyler L I am having the same problem as Abhay. The first “image” in my lightbox is my page in an iframe. Could you please guide me how to go about fixing this? I tried his solution. Here is my code:

[vc_row][vc_column width="1/1"][lightbox selector=".omnitapps-examples" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal"]
[button shape="square" size="regular" float="none" info="none" info_place="top" info_trigger="hover" class="omnitapps-examples" href="#"]Examples[/button][/vc_column][/vc_row]

[vc_row padding_top="0px" padding_bottom="0px" border="none" style="display:none;"][vc_column width="1/1"]
[image type="none" float="none" info="none" info_place="top" info_trigger="hover" src="79" href="79" class="omnitapps-examples" link="true" lightbox_caption="Omnitapps example"]
[image type="none" float="none" info="none" info_place="top" info_trigger="hover" src="80" link="true"][/vc_column][/vc_row]
]]>