I have 3 pics that I want to link them in my photo gallery. So when I click one of the image, it should have the next and previous arrow that allow the user to go to another image. My codes with lightbox2 is as below.
<a href="my/path/images/image1.jpg" data-lightbox="roadtrip" data-title="My caption">
<img src="my/path/thumbnails/thumb1.jpg" alt="Surfing"/>
</a>
<a href="my/path/images/image2.jpg" data-lightbox="roadtrip" data-title="My caption">
<img src="my/path/thumbnails/thumb2.jpg" alt="Lifeguard Stand"/>
</a>
<a href="my/path/images/image3.jpg" data-lightbox="roadtrip" data-title="My caption">
<img src="my/path/thumbnails/thumb3.jpg" alt="Hot Air Balloons"/>
</a>
So now when I run the code, in the first image there will be an next arrow that links to the second image. However, when the user is in the second image, there is only previous arrow but no next arrow. But I want both arrows to appear.
If anyone knows how to solve the issue, please let me know. Appreciated!!
Ok so I found the answer by myself and below is the answer for many people who may have encountered the same problems.
Just change the width of .lb-nav a.lb-prev in the lightbox.css and it should work. I change it from 64% to 50% and then the next arrow appears.
I don't have time digging into what's the essential cause is, but this solution does work. If anyone knows what exactly happens there, please feel free to leave a comment or answer. Appreciated!