I don’t think this is supposed to work.
Provide me with a URL and I will look into it.
There are many problems with your JavaScript (you can see an error on your JavaScript console).
A few things stand out:
- You are calling the JavaScript at an arbitrary place, before Photonic’s scripts have been loaded. You will have to work with your theme’s support to figure out how to load the script after Photonic. Photonic’s script loads in the footer by default – you can change this to load in the header instead (via Photonic → Settings → Generic Options → Generic Settings → Include Photonic JS for non-Photonic Images / Videos and Photonic → Settings → Generic Options → Generic Settings → Force JS in header when possible). While this will load Photonic in the header, there is no guarantee that your theme’s script will be called after Photonic’s, which is why you will need to work with your theme’s support.
- Your syntax is using
$, presumably for jQuery, but you haven’t specified anywhere that $ is refering to jQuery. You have to fix that.
- I don’t believe
lightGallery is available as a function directly, as you have called in your code. I may be wrong, but once you have fixed the above two problems you will find out. But as such you might not even need that line.
- You are using ES6 syntax, which is not going to work for IE 11, but that is a fairly small percentage of users
- For the trigger, you don’t need to include
img – LightGallery is bound to the a, so if you trigger the click on the a that should be good enough.
Even after you do all of this, I am not sure if it will work – I have never had to make it work this way, and there might be all types of issues such as double initiation of the gallery if someone clicks on a thumbnail, or issues with deeplinking, or an inability to close the lightbox etc.
I gave this some thought, and here is an alternative suggestion: make use of Photonic’s deep-linking capabilities. Basically, most of Photonic’s lightboxes support deep-linking. You are using LightGallery, and that definitely has deep-linking.
To do this:
- Click on the thumbnail for the photo that you want to open with the button.
- When the photo opens up in a lightbox, copy the URL from the browser window.
- In your link’s
href put the URL that you have copied.
thank you @sayontan for your time. its works if open on new tab/window browser.