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


Anyone recommend a good Lightbox?

I have tried this light box http://lokeshdhakar.com/projects/lightbox2/ but it buggy. I loads the last image of a group first this would be fine if i just reversed the image order but instead of a next arrow on the right, I just have a previous arrow on the left which isnt very good.

So can anyone recommend a good light box that is simple like this i dont need it full of amazing features just one that is simple to add and you click a link on the page and the images appear.

Thanks in advance for any suggestions. :)

3 Answers

Here is a good one too: FancyBox v.1.3.4: http://fancybox.net/ FancyBox v.2.0: http://fancyapps.com/fancybox/

I use this one, it is very simple to use. http://lokeshdhakar.com/projects/lightbox2/

That the one that i linked in my post that i am having an issue with i do like it but its got a bug where it show last image first and i dont know how to fix it :\

I have not had this happen to me yet. Can you post the excerpt of code that is implementing and maybe we can figure out what's causing it.

I havnt edited the CSS or JS what so ever and the html is this

                    <div class="block_holder">
                    <div class="block">
                        <img src="images/projectimages/ultimategamingparadise.png" alt="Ultimate gaming Paradise" />
                    <div class="hover_info">
                        <h1>Ultimate Gaming Paradise</h1>
                        <p>Full web design including news &amp; reviews pages, ecommerce, about and contact pages</p>

                        <a class="lightboxlink" href="images/projectimages/ugp/news.png" data-lightbox="ugp" title="News Page">Enlarge</a>
                        <a class="lightboxlink" href="images/projectimages/ugp/reviews.png" data-lightbox="ugp" title="Reviews Page">Enlarge</a>
                        <a class="lightboxlink" href="images/projectimages/ugp/homepage.png" data-lightbox="ugp" title="Ultimate Gaming Paradise Home Page">Enlarge</a>

The code for the light box its self starts it <a class="lightboxlink"

When I use lightbox2 I always get better results when wrapping each image link with a div that has the class with the value of "lightboxlink". Try that, remove the class from the link itself and wrap a div around each individual one with that class assigned to each div.

Hope this helps.

I just tried that and still the same issue :\