Make a Jquery and CSS3 powered Lightbox Gallery
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.
22 Comments
Description
22 Comments
(close)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
Really nice work!Hope you don’t mind if I take some ideas from the code!
Max
Great tut! awesome work! Thanks for sharing!
Andrew
Im having the same issue
Acttoon
Thx to share
But .. There something wrong
Function to open larg img is not work at all.
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
The JQuery doesn’t seem to open the large image.
Fun
Put the following code into your html page:
fun
script src=”http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js” type=”text/javascript”>
John
Still Doesnt work
wiyono
Don’t work…
http://www5.online-nrw.de/lightbox/
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
The example on the right works fine, anybobody more aware than me about coding could check the page source code ?
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
hey, really useful! thats great man! thank you, i just have one little problem, the websymbols doestn display on firefox, any idea why?
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
do its not work
Francis
you code like a chief! work 1000%! what is the license…MIT ?
simon
This is fricking epic!
Thanks a lot!!!
Kurama
doesn’t work for me
watch this http://cirengsuper.hol.es/galeriSlider.php
catering toronto
Excellent post! We will be linking to this great article on our site.
Keep up the great writing.
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?