I followed the instructions on how to apply the lightbox JavaScript to a gallery page. When an image is clicked, the lightbox displays correctly, the loading icon appears while the larger image was being called and the close button appears below the image where it should and functions as it should.
However, the next and previous buttons/icons do not appear, and moving the cursor over where they should be does not activate any pointer.
I have tried to find any css conflicts but none come up.
I am using the “lightbox-plus-jquery” js version.
Any advice would be appreciated.
I found my own answer by playing with some things and watching various videos on how they were using the lightbox javascript on YouTube.
Essentially the solution is that ALL the images you want the lightbox to apply to HAVE TO BE IN THE SAME DIV. I was using a grid layout and for some reason initially the grid was not working when I simply put images in the same div. So I made a whole bunch of divs, each with one image inside, and that seemed to fix the grid layout issue. When I deleted all the divs and adjusted the css to match, I still had my grid AND the previous and next icons appeared.
I guess the javascript is looking for other images in the same div, can't find any, and so does not display the previous and next icons.
A heads up for others.