Make a Jquery and CSS3 powered Lightbox Gallery

View code Play Walkthrough

Description

Learn to make a fully functional lightbox using Jquery with both mouse and keyboard based controls for navigating images.

The thumbnails have cool hover effects with zoom icons added by CSS3 pseudo elements to save on repetitive HTML.

Web Symbols Typeface used for left/right/zoom icons.

Add New Comment

22 Comments

(close)
Tong

Tong

after copy and pasted the codes seems something wrong.How to link with the Jquery? When I clicked the image it doesn’t working. The hover everything just working but the Jquery like not functioning. I need to modify anything or missed something?

Daimonos

Daimonos

Really nice work!Hope you don’t mind if I take some ideas from the code!

Max

Max

Great tut! awesome work! Thanks for sharing!

Andrew

Andrew

Im having the same issue

Acttoon

Acttoon

Thx to share
But .. There something wrong
Function to open larg img is not work at all.

Nure alam

Nure alam

Good one i thing a new learner helpful to see this coding view.
But I also thing that it was better if take sequence coding.

Thanks.

Ntsakzin

Ntsakzin

The JQuery doesn’t seem to open the large image.

Fun

Fun

Put the following code into your html page:

fun

fun

script src=”http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js” type=”text/javascript”>

John

John

Still Doesnt work

Niko

Niko

Thanks for the tuto, I´ve learned a lot by modifying a few stuff. Gonna use it for my Portfolio. bumm for the large-image problem.

Niko

Niko

The example on the right works fine, anybobody more aware than me about coding could check the page source code ?

Mufaddal

Mufaddal

Nice Tutorial, I am facing issues with larger images.. Is there a way to give a maxwidth and maxheight. so its fixed to container..

Thanks

Marco

Marco

hey, really useful! thats great man! thank you, i just have one little problem, the websymbols doestn display on firefox, any idea why?

si

si

How to add a “- Close” on the image when it is large. Everything else is great, just having trouble customizing this any help would be great. Cheers

bryan

bryan

do its not work

Francis

Francis

you code like a chief! work 1000%! what is the license…MIT ?

simon

simon

This is fricking epic!
Thanks a lot!!!

catering toronto

catering toronto

Excellent post! We will be linking to this great article on our site.
Keep up the great writing.

chris

chris

How would you set the max-height/max-width for the enlarged version inside the code instead of having to manually go and edit the data-large images?

5x 10x 15x 20x

22 Comments

Description