hello, im currently finishing a website and i’m doing the our work section, here’s the link https://www.skyrocket360.com/our-work-2/#
At the end of the section you’ll find the gallery section, if you click it it will open a modal with every picture (im using the envira gallery plugin) usually when you show the gallery, if you click the image it will make it bigger, but when the envira gallery is inside the modal, clicking the image will do nothing, except once you close the modal the big image will appear, is there a way to close the modal once you click the image? or prioritize with a z score of some kind the full size image over the modal? they are appearing when you click them but behind the modal, thanks!
check the website so you can understand what i mean, open the gallery, click any image (nothing will happen) and then close the modal, the full size image will appear
Hi Juan,
Here, the Envira Modal is coming under the main modal. You need to close the main modal once the image is clicked. To do that you need to add custom JavaScript code based on the image class to close the Modal. You may need to add some class or ID to the modal to target inside the code as described in the following thread.
Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style and structure.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it. Further customization should be directed to a third-party developer, or you can avail yourself of One, where we answer questions beyond normal theme support.
Thanks
thank you for the quick reply! JS in not my area to be honest, i have added the script to the global js of the website, but it still doesnt work, i’m not sure exactly how to target it inside of the modal, i have try different IDs but they din’t work, should i add a custom id to the code? i would appreaciate the help, i just wanna know which id should i use and where to add it (both in the code and in the modal) thanks!
Thank you for the update. We may need to login to the site in order to test this properly. Please provide the login details in the secure note as shown below.
We’ll check the site again once the login info is available.
i just did, thank you!
Hi Juan,
If you are not proficient with JavaScript, I would suggest you hire a developer who can assist you on this or you can avail of our newly launched service called One, where we answer the questions beyond normal theme support.
Thanks
Hello, thanks for the reply, why did you guys asked for the login details then? I’m not asking you to modify the code, I’m asking, based on the code you guys gave me, which I’d/class should I use to target the inside of the modal? And where should I put it, in the row? Modal? Raw element?
I just wanna be able to close the modal once you click an image, or maybe just change the z score so that the enviar gallery would show on top of the modal, any help would be greatly appreciated
Hi Juan,
Sorry for the confusion. We just wanted to check what you are expecting here, and if that can be achieved with a minimum custom code and found that is not what can be done.
Hope I am able to clarify it.
Thanks
ohhhh, got it, thank you for the help tho!
Hey Juan,
You’re most welcome!
One question about this, the reason why I have the gallery in the modal is because when the gallery is outside the modal the page takes a long time to load, what advice could you give me to maybe move the gallery outside the modal but keep the page loading fast? Maybe another element that minimizes the gallery and when you click it it becomes bigger?
Thank you