Open gallery from other button?

[ALTELMA]

I will finding solution for click button and open gallery and integrated from lightslider
I not sure It's possible to do like this.

Anyone can suggestion?
Thanks

[sachinchoolur]

Hi,

Method 1:

Use lightGallery dynamic mode
Demo : http://sachinchoolur.github.io/lightGallery/demos/dynamic.html

Method 2:

Trigger click event with jQuery :

$('#mybutton').on('click', function() {
   $('.first-item').trigger('click');
});

[giangphoton]

Hi Sachin,

I tried to trigger click event with jQuery using Method 2 you mentioned above but it didn't work. Please review my code.

I have a Zoom icon with id "zoom-btn":
<div class="zoom-btn"> <span class="fa fa-search" aria-hidden="true"> </div>

For the script:
` <script>
lightGallery(document.getElementById('lightgallery'));

$(document).ready(function() {
$('#zoom-btn').on('click', function() {
$('#item1').trigger('click');
});
});
</script>`

I clicked on the button and it didn't run. Please give me some suggestions.

Thanks,
Giang

[fhdalikhan]

Hi Sachin,

I tried to trigger click event with jQuery using Method 2 you mentioned above but it didn't work. Please review my code.

I have a Zoom icon with id "zoom-btn":
<div class="zoom-btn"> <span class="fa fa-search" aria-hidden="true"> </div>

For the script:
` <script>
lightGallery(document.getElementById('lightgallery'));

$(document).ready(function() {
$('#zoom-btn').on('click', function() {
$('#item1').trigger('click');
});
});
</script>`

I clicked on the button and it didn't run. Please give me some suggestions.

Thanks,
Giang

You have a class name zoom-btn not an id, to reference a class use $('.zoom-btn') and for id use $('#zoom-btn') jquery selector.

[surfer77]

Here is a snippet without using jquery in case anyone is looking for in the future:

document.querySelector(".startGalleryBtn").addEventListener('click', function() {
	var startGalleryEvent = new CustomEvent('click', {bubbles: true, cancelable: true});
	document.querySelector(".firstGalleryItem").dispatchEvent(startGalleryEvent);
})