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

JavaScript

Posted by danielcroft
danielcroft
7,438 Points

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

Calvin Bramlett
Calvin Bramlett
13,748 Points
Calvin Bramlett
Calvin Bramlett
13,748 Points

Try this one! http://tympanus.net/codrops/2011/12/26/css3-lightbox/

Tar Peter
Tar Peter
1,777 Points
Tar Peter
Tar Peter
1,777 Points

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

Brandon Still
Brandon Still
6,524 Points
Brandon Still
Brandon Still
6,524 Points

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

danielcroft
danielcroft
7,438 Points

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 :\

Brandon Still
Brandon Still
6,524 Points

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.

danielcroft
danielcroft
7,438 Points

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>
                    </div>
                    </div>
                    </div>

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

Brandon Still
Brandon Still
6,524 Points

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.

danielcroft
danielcroft
7,438 Points

I just tried that and still the same issue :\