I’m doing a (static) website for a friend, and she wants to have very simple gallery.
Let me first explain the way gallery is structured (she wants it like that, so i can’t really change this part):
Gallery is showcasing different projects that she made, and each project has it’s own page.
so, for example:
PROJECT 1
– modelling
--------image 1
--------image 2
--------image 3
– texturing
--------image 1
--------image 2
--------image 3
…
And for each project, it’s similar structure.
now, modelling, texturing, etc., is all in the same page. So, when you open a page for project 1, you will have all images for it on this page, they will just be arranged in groups (modelling, texturing, etc).
Now, one thing that i need to make, is to make it, so that when you click on thumbnail, the larger image is shown over the rest of the page (with background half transparent, so that it hides the rest of page while you are looking and high res version of image). When you click ‘close’, you are back on main page.
I managed to make that, but the problem is, that while you are viewing large version, there should be buttons for previous image and next image in this GROUP.
So say, if you look at upper structure, you are viewing project 1, and you click in modelling group image 2.
When large version opens, it should have buttons for next image(image 3), and previous image(image 1).
This is what i’m not completly sure how to do it. Somehow, i need to group images that belong in the same group (probably put them in same div tag), and somehow give them sort of index, so that when i click image 2, and larger version is opened, browser has this index somewhere stored, so that when i press ‘next’, the image with 1 index higher value will show.
But, how would i go in doing so? I more used to php, so i would make it quicker if it was php, but i’m not sure how to do that with jquery/javascript.
So, any ideas? tnx!