Implementing a modal(lightbox) for all images in all post-gallery posts

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!

Topic media-modal gallery images Wordpress

Category Web

1
answered at

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

1
answered at

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/

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.