I’m trying to make a photo gallery page for all my photos in my post-gallery post and have a modal open when you click on the photos. In the page there will probably be almost 100 photos and i’m not sure how to do this in a good way without duplicating the code for the modal 100x. I have considered using plugins but i’d doing this as part of making my own website and learning developing wordpress themes so i’d prefer if the solution is done with code.
Something Best practice solution for this situation would be great!
I would appreciate tips in how to do this!
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
This W3Schools page shows how to create a lightbox with HTML, CSS and vanilla JS only:
https://www.w3schools.com/howto/howto_js_lightbox.asp
If you have lots of photos on a page, you may want to remove the code related to the “thumbnail image controls” that they use in this example. But, other than that, I think their example shows what you want to do.
Another solution might be to use a jQuery-based library like Fancybox:
http://fancyapps.com/fancybox/3/
Method 2
i’ve found a solution for this using jquery. i set up an event that when you click on an image it opens a modal and gets the url of the image from the gallery and places it to the img tag in the modal. it works alright but it feels like a workaround atm
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0