[Abhay BParticipant]

I want to launch an lightbox image gallery from a button click. Is there any way to achieve this? Would greatly appreciate some assistance.

[ChristianModerator]

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.

[Abhay BParticipant]

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

[Rob DParticipant]

Looking for the same ability.

[Rob DParticipant]

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!

[ChristianModerator]

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. 🙂

[Abhay BParticipant]

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 🙁

[Abhay BParticipant]

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]

[ChristianModerator]

Glad you’ve figured it out Abhay.

[Tyler LParticipant]

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]

[RadModerator]

Hi Tyler,

Your button’s href is equal to #, which means load the current page. If you wish to load specific image, then use a correct url for your button.

Thanks.

[Author]

Posts