0

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!

Improve this question
2
  • Add a data attribute to each image in the gallery like data-img="" and then for each image include it's ID or something else unique. Then when someone clicks on the image you grab the value of that attribute and use the unique identifier to tell the modal lightbox which image it should display. So to do this you have to be able to access/modify your 'gallery' output code. Then just include the modal script in your JS and you're all set.
    – Tony Djukic
    Commented Jun 4, 2021 at 13:41
  • 1
    I'm not familiar with data attribute so imm look in to this, thanks!
    – Jomeb
    Commented Jun 4, 2021 at 21:34

2 Answers 2

Reset to default
0

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/

Improve this answer
1
  • Thanks for the answer! Ive thought about doing this but it just felt like there should be a better way to do it. It seems like at the moment this would be the best option without having to rely on plugins. Thanks!
    – Jomeb
    Commented Jun 4, 2021 at 21:32
0

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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.