Beginner question: have a gallery where each thumbnail opens a separate set of images

Beginner question: have a gallery where each thumbnail opens a separate set of images

Since I got so much excellent help on my last post, please let me try again šŸ˜‰

I’m a vfx artist and would like to have a gallery where each thumbnail represents a project, not just a larger image like a photographer’s. (I’m using a templatemo css template as a base, which seems to use bootstrap). (https://templatemo.com/tm-520-highway)

a viable approach would be to simply be able to browse through a different subset of images instead of one large image after clicking on a thumbnail.

so thumbnail_A opens a lightbox where you can browse image_A_1, image_A_2, etc.
(best case would be to have two sets of left-right arrows, one that cycles through the subset of images and one that jumps to the next/previous project)

an AI suggested a javascript function to cycle through a hardcoded set of images, but this would mean that each thumbnail would need its own JS if I’m not mistaken. isn’t there an easier way to do this? (I have more than 150 projects to add)

this is how the gallery/thumbnail is now coded in the html:

 <div  id="masonry"> <div > <div > <!-- ------ DIESEL ---------- --> <div > <a href="gallery/diesel/diesel_01.jpg" data-lightbox="image-1"><div > <div > <div > <h1>DIESEL <em>go with the flaw</em></h1> <p>2016 MPC</p> </div> </div> <div > <img src="gallery/diesel/diesel_01.jpg"> </div> </div></a> </div> 

the more i google about it, the more i think this isn’t something trivial šŸ˜‰ but maybe someone has a suggestion, that a non-developer like me can implement?

or maybe someone would be willing to look at the current codebase and add it as an example for one thumbnail? (I could offer a small helper allowance, would paying 50 euros sound good, or is this insultingly low?)

thanks for all the help!

submitted by /u/deroesi
[visit reddit] [comments]
#Beginner #question #gallery #thumbnail #opens #separate #set #images

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *