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

16 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

5x 10x 15x 20x

16 Comments

Description