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

HTML

David Contreras
David Contreras
6,187 Points
Posted by David Contreras
David Contreras
6,187 Points

I need training on creating a lightbox image gallery. Can someone help me with this?

I need training on creating a lightbox image gallery. Can someone help me with this?

Any advice is greatly appreciated.

4 Answers

Chris Malcolm
Chris Malcolm
2,909 Points
Chris Malcolm
Chris Malcolm
2,909 Points

from scratch or a js plugin for you to use?

If you go the plugin route which there are a lot of options for..here is one. check out http://lokeshdhakar.com/projects/lightbox2/ for a js plugin. You include necessary css and js files they specify.

And then for your gallery thumbnail, you would surround with an anchor tag and include the attributes data-lightbox='my-image1' data-title='this will be a caption'

David Contreras
David Contreras
6,187 Points
David Contreras
David Contreras
6,187 Points

And from scratch, do you know if treehouse has any training on this?

Chris Malcolm
Chris Malcolm
2,909 Points
Chris Malcolm
Chris Malcolm
2,909 Points

Here is a basic rudimentary example of how to implement such a thing. The idea is to create a fixed shadow div (lightbox_bg). and within that, your absolutely positioned "box" (lightbox). in your css, by default the lightbox_bg is hidden..and you use some javascript to toggle it on or off.

Example: http://codepen.io/anon/pen/zclHB

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

David;

There is a simple Lightbox that is covered in the jQuery Basics Course offered in the library here. Good course, Mr. Chalkley is a good instructor.

Julian Gutierrez
Julian Gutierrez
19,201 Points
Julian Gutierrez
Julian Gutierrez
19,201 Points

If you take a look at the jQuery Basics course there is a section is called Creating a Simple Lightbox, that might help you.

Marcelo Retana
Marcelo Retana
2,534 Points
Marcelo Retana
Marcelo Retana
2,534 Points

There is a course on the jQuery Course with an example of this, you can go and get it there. I can not provide you with the link because I am from my phone, sorry.