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

admin管理员组

文章数量:1291044

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!

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!

• images
• gallery
• media-modal

Share Improve this question edited Jun 3, 2021 at 15:12 fuxia♦ 107k3838 gold badges255255 silver badges459459 bronze badges asked Jun 3, 2021 at 12:22 JomebJomeb 122 bronze badges 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

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

This W3Schools page shows how to create a lightbox with HTML, CSS and vanilla JS only: https://www.w3schools/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/fancybox/3/

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

本文标签： Implementing a modal(lightbox) for all images in all postgallery posts