Create button that opens multi-image lightbox

Support
#1

What’s the cleanest way to make it so this “Tour” button opens a light box with multiple images: www.pumphoists.com/about-pulstar/

Is there a way to do it without utilizing a 3rd party plugin?

If not, what if I have a 3rd party plugin ready to go? Is it possible to incorporate this short code: [rl_gallery id=“1347”] into what I have already:

[button class=“tour-facilities-btn” type=“flat” style=“background-color: #ffffff; color: #ff551d; border: none;” shape=“rounded” size=“large” href="#" title=“Tour Pulstar’s Facilities”]Tour Pulstar’s Facilities [/button]

#2

Hi,

Thanks for writing in!

This is not possible out of the box and needs some custom code which is outside the scope of support.

To give you something you can start with, you can try the code listed on the link below.

Hope that helps

#3

I tried clicking but got this…

#4

Hi There,

Please follow these steps:

  • HTML(you have to create a gallery first and it should be added under the text element):

<div class="group-gallery">[gallery link="file" size="full" ids="58,227,59,57,56"][lightbox selector=".group-gallery .gallery-item a"]</div>

  • JS(it should be added under Theme Options > JS):
jQuery ( function($) {
  $('.gallery-button').off('touchstart touchend').on('click', function() {
  		$('.group-gallery .gallery-item:first-child a').trigger('click');
  } );
} );
  • CSS(it should be added under Theme Options > CSS):
.group-gallery .gallery {
	display: none;
}

The gallery-button is the class of your button.

Hope it helps :slight_smile:

#5

OK wow. Thank you so much. I feel like I’m close, but am still missing something. The button is there. The gallery is there. But the gallery is still showing despite having a “display: none” setting and the button doesn’t activate the gallery.

Is that because I have the href set to #?

As you can see, I have changed my button class name to gallery-button, to make it easier. Here is the button code:
[button class=“gallery-button” type=“flat” style=“background-color: #ffffff; color: #ff551d; border: none;” shape=“rounded” size=“large” href="#" title=“Tour Pulstar’s Facilities”]Tour Pulstar’s Facilities [/button]

I added the code you provided for my gallery, with a substitution of my own gallery shortcode info:

I have put this code into Theme Options CSS:

And, I have put this into Theme Options JS:

Have I missed something?

#6

Hi There,

The example code is used for the default WP gallery.

To make it work with your 3rd party gallery, please update the code to this:

  • HTML:

<div class="group-gallery">[rl_gallery id="1347"][lightbox selector=".group-gallery .rl-gallery-item a"]</div>

  • CSS
.group-gallery .rl-gallery-container {
	display: none;
}
  • JS
jQuery ( function($) {
  $('.gallery-button').off('touchstart touchend').on('click', function() {
  		$('.group-gallery .rl-gallery-item:first-child a').trigger('click');
  } );
} );

Hope it helps :slight_smile:

#7

OMG it worked. You’re awesome! Thanks, Thai!

One last thing. Check it out here by clicking on the “Tour Pulstar’s Facilities” button on www.pumphoists.com/about-pulstar

When you click on the button, you’ll see that there are 2 light box styles that open. If you click once anywhere off the light box picture, you’ll deactivate the top layer light box and activate the bottom layer light box. I would prefer the top layer to not exist at all, and only have the bottom light box layer. Is there a part of the code you provided that is causing that top light box style to appear?

If you go to this page and scroll down about half way, you’ll see the light box gallery act as the settings indicate: http://pumphoists.com/p7-pump-hoist/

#8

Hi There,

To disable the top lightbox, please update your HTML code to this:

<div class="group-gallery">[rl_gallery id="1347"]</div>

Hope it helps :slight_smile:

#9

Mark this one closed! Thanks so much, Thai. You’ve been so helpful. Cheers

#10

You’re more than welcome, glad we could help.

Cheers!

#11

I noticed that the light box doesn’t open on mobile. Do you have a suggestion for that?

#12

Hello There,

The lightbox is triggered by JS. On mobile it does not open because there is no click event. Please have it updated and use this instead:

jQuery ( function($) {
  $('.gallery-button').off('touchstart touchend').on('click touchstart', function() {
  		$('.group-gallery .rl-gallery-item:first-child a').trigger('click');
  } );
} );

We would loved to know if this has work for you. Thank you.

#13

Hi. Sorry for delay. Been working hard on this site. Can you clarify if I’m supposed to add this in place of the jQ code I’ve already added for this functionality, or in addition to it? Thanks.

#14

Hello @PPE29,

You will have to update the JS code and use the one I have given.
Or add this code as a replacement of your current JS code.

Hope this helps.

#15

OK that worked perfectly! Cheers

Any idea why this would’ve broken after moving the files from a dev domain to pulstarmfg.com/about-pulstar?

The gallery name is still the same [rl_gallery id=“1347”]

The CSS is still the same

The JS is still the same

#16

You’re welcome!
Thanks for letting us know that it has worked for you.

#17

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.