Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion Interactive Photo Gallery

Jonathan Meine
seal-mask
.a{fill-rule:evenodd;}techdegree
Jonathan Meine
Front End Web Development Techdegree Student 10,944 Points
Posted by Jonathan Meine
.a{fill-rule:evenodd;}techdegree
Jonathan Meine
Front End Web Development Techdegree Student 10,944 Points

Help with Interactive Photo Gallery project - cannot get Lightbox2 "previous" and "next" arrows to show/function

Hi - currently working on the Interactive Photo Gallery project; have successfully implemented the Lightbox2 jQuery plug-in and have it working correctly with my gallery -- EXCEPT -- I cannot get the "previous" and "next" arrows to show or function in the Lightbox display, either by default or on mouse hover. Strangely, I am able to display the "close.png" image and have it function correctly, which is located in the same directory as the "previous.png" and "next.png images". Have done a million Google searches and tried everything under the sun to this point, but completely stumped. Have a feeling it's a really obvious thing that I'm just not catching. Any help much appreciated - files located on GitHub at Jonathan23-Projects/InteractivePhotoGallery

1 Answer

simhub
simhub
26,544 Points
simhub
simhub
26,544 Points

Hi Jonathan,
you did everything right :)

just try to use a set of imgs if you want to navigate to a group of related images like in your case.

just use the same 'data-lightbox' attr. for all your images:

If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute 

value for all of the images. For example:
<a href="images/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="images/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="images/image-4.jpg" data-lightbox="roadtrip">Image #4</a>

look here http://lokeshdhakar.com/projects/lightbox2/#examples

hope this helps ;)

Jonathan Meine
seal-mask
.a{fill-rule:evenodd;}techdegree
Jonathan Meine
Front End Web Development Techdegree Student 10,944 Points
Jonathan Meine
.a{fill-rule:evenodd;}techdegree
Jonathan Meine
Front End Web Development Techdegree Student 10,944 Points

Hi - thanks for the response - yeap, looked again at it last night, and that was indeed the issue. Not sure how I misunderstood the Lightbox2 documentation in the first place, but glad I got it resolved!