Lightbox 2 Tutorial – JS/XHTML

Lightbox has become one of the most popular ways on the internet to view images.  In this video tutorial, I walk you through how to implement Lightbox 2 into your web design.  We start from scratch and finish with the very popular Lightbox effect.

Written by Shane Jeffers

Shane Jeffers is the Creator and Author of Three Styles. I have a unique passion for design trends and tutorials. Follow me on twitter @ThreeStyles

9 Responses to “Lightbox 2 Tutorial – JS/XHTML”

1. Renee' Says:
   August 19th, 2009 at 12:07 am

   SWEET!!!!!! If you don’t understand or you just don’t know where to put the code, use this tutuorial step by steep you will get it right!

2. Yvonne Says:
   September 7th, 2009 at 4:36 pm

   I had been struggling for ages to understand where to put the code and how to link the photos and this tutorial has explained it all. Well worth watching.

3. Ciwan Says:
   March 1st, 2010 at 6:36 am

   Thank you soo much for this.

   I always wondered how that was done. I didn’t know it was a ready made thing. I thought people always coded it from scratch.

   Thank You once again.

4. jay Says:
   April 27th, 2010 at 9:24 pm

   Hi, all

   How can I add linked captions at the bottom of each picture?

   thanks

5. CCIDgfx Says:
   October 15th, 2010 at 12:31 am

   I’m pretty new with all of this coding stuff and your tutorial was very helpful in learning how to use lightbox. However what I am trying to do is add this into my website. I’m not really sure where to put the code or how to link it up. Any help would be greatly appreciated. =)
   Thanks

6. Mike Says:
   May 7th, 2011 at 1:02 pm

   Even though i followed this tutorial bit by bit when the user clicks the picture it doesnt use the lightbox feature and just opens the picture up on a new page

7. Shane Jeffers Says:
   May 7th, 2011 at 2:25 pm

   @Mike

   If you followed the tutorial correctly it will work I guarantee. Go back and check to see if your javascript files are all linked and in the correct place. Also check that rel=”lightbox” is on the anchor tag.

8. Leykun Says:
   May 16th, 2011 at 9:41 am

   Hi Shane, I was wondering if i can use Lightbox on a joomla website? Is it possible? I want to use it on articles that have a gallery dedicated for them…..well in my case using the lightbox if possible…..

9. Max Says:
   July 21st, 2011 at 4:35 pm

   Thank you, thank you, and thank you! Great tutorial!

Leave a Reply

Click here to cancel reply.

Name (required)

Mail (will not be published) (required)

Website

Notify me of followup comments via e-mail