Popup Button for Gallery

[Van_Biljon]

Hello Team

I am looking to get add a button when clicks opens up a lightbox containing gallery images.

I have managed to get everything to work by following a x theme form here BUT I can’t get it to work on mobile.

My code as as follows:

In Text Element

<div class="lightbox-group">
[button type="flat" shape="rounded" size="x-large" block="true" title="Example" class="gallery-button"][x_icon type="picture-o"]Gallery[/button]
[gallery link="file" ids="4439,4048"]
[lightbox thumbnails="true" selector=".lightbox-group .gallery-item a"]

CSS

* Gallery Button */
.lightbox-group {
  background-color: rgb(54,60,69);
}

.lightbox-group .gallery {
 display: none;
}

.ilightbox-next {
  left: 1500px !important;
}

.ilightbox-prev {
  left: -500px !important;
}

.x-btn .gallery-button {
  text-shadow: none !important;
}

JS

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

Please can you help with understanding why this is not working on mobile.

Regards
Stefan

[friech]

Hi Stefan,

Thank you for writing in, instead of customizing the Lightbox shortcode, please utilize the Envira Gallery extension.

After you created a Gallery use the 3rd shortcode for adding a text link trigger to launch the gallery.

• 

You can then style the text to make it look like a button.

Hope it helps,
Cheers!

[Van_Biljon]

Using another plugin is not ideal but is managed to get me over the line

[ruenel]

Hello Stefan,

Your code is broken:

<div class="lightbox-group">
[button type="flat" shape="rounded" size="x-large" block="true" title="Example" class="gallery-button"][x_icon type="picture-o"]Gallery[/button]
[gallery link="file" ids="4439,4048"]
[lightbox thumbnails="true" selector=".lightbox-group .gallery-item a"]

You need to update it and use this:

<div class="lightbox-group">
[button type="flat" shape="rounded" size="x-large" block="true" title="Example" class="gallery-button"][x_icon type="picture-o"]Gallery[/button]
[gallery link="file" ids="4439,4048"]
</div>
[lightbox thumbnails="true" selector=".lightbox-group .gallery-item a"]

Just to manage your expectations, this isn’t specifically a theme issue, but rather, your customisation of it. So whilst I have happily provided you with some guidance above on how to get it working, we cannot provide theme customisation as a general rule, or support custom code solutions provided. Therefore, you might find it helpful to check out the following:

CSS Selector Reference
How to find the css selector in chrome

Best Regards.