Docs

[Rad]

Hi there,

You mean, hide the thumbnails and launch the lightbox by button?

I changed your content to this,

<div class="lightbox-group">[button type="flat" shape="square" title="Example" class="gallery-button"]Launch Me![/button]  

[lightbox selector=".lightbox-group .gallery-item a"]
</div>

Then added this CSS and Javascript through Customizer.

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

and

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

And please remove this CSS from your Cornerstone’s Custom Javascript.

.hide-img{display:none};

CSS is for CSS only.

Thanks!

[ryaneford]

Fantastic! Thank you. Last question regarding this. How can I have it so there are keyboard arrow controls or visible arrows on the lightbox gallery?

Thanks!

[Jade]

Hi there,

Please refer to this thread about that: https://community.theme.co/forums/topic/navigation-buttons-on-responsive-lightbox/

Hope this helps.

[ryaneford]

That totally worked.

ONE last question. The gallery doesn’t seem to pop up in mobile. Am I missing something there?

Thanks.

[Rad]

Hi there,

Please change this code

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

to this,

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

Hope this helps.

[ryaneford]

holy crap you guys are the best.

[Rupok]

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts