Comments on: Semantic CSS3 Lightboxes

By: Tom

Tom — Fri, 18 Nov 2011 19:55:11 +0000

The video continues to play even after you close the lightbox! You have to keep hitting the back button to make it stop. Unfortunately, it’s not worth using this for video. And even with the other lightboxes, when you hit the back button, you don’t go to the original page you opened but to all previously open lightbox pop-ups. Great concept but very impractical and potentially annoying to website visitors.

By: Elodie

Elodie — Thu, 20 Oct 2011 10:06:09 +0000

Hello,
It works perfectly !
Just one little problem : if I introduce a video in one of these lightbox different of a youtube video :
I mean a video file which is on my website, and I use the code description
When I close the lightbox, the video is still running !
There is no compatibility ? Or do you have an issue ?

By: Robert Downey

Robert Downey — Mon, 29 Aug 2011 11:28:58 +0000

I found this tutorial fun and easy to understand even though I am not a coder. One wuestion I have is, if I wanted to take this to the next level and make it into a slideshow of sorts with a simple next and previous buttons to cycle through the shots, how would I do that?

I am running visual lightbox right now, it looks great but it is slow. can you help me understand. I learn fast from samples, but don’t know where to start. you can email me or reply here. Thanks!! Great Code!!

By: Jonathan

Jonathan — Mon, 27 Jun 2011 20:26:58 +0000

Hi,
I love your code for the lightbox. It fits seemlessly into my page. Just one question. If I wanted to show the lightbox from javascript code, how would I go about doing that?

By: Andrew Margolin

Andrew Margolin — Tue, 03 May 2011 13:01:00 +0000

Just so you know the video pop up doesnt work in ie9. If you know of any lightbox’s that work with video in ie9, please let me know :)

By: Luca

Luca — Fri, 14 Jan 2011 09:39:36 +0000

Would it be possible to apply CSS3 animations to simulate a fade effect? Just for a visual implementation.

By: venkat

venkat — Wed, 01 Dec 2010 09:27:27 +0000

good one

By: richphitzwell

richphitzwell — Tue, 19 Oct 2010 20:25:24 +0000

Found one issue, on smartphones such as droid, scroll doesnt work on content in your demo.

By: richphitzwell

richphitzwell — Thu, 23 Sep 2010 21:52:04 +0000

*I figured out what I did wrong with IE, I forgot to change the box focus to 5% as well, my bad. I must have other code that is screwing up the width. Go ahead and delete both this comment and the other comment prior to this. Im happy with it being slightly offset. Thanks for the great code man.

By: richphitzwell

richphitzwell — Thu, 23 Sep 2010 21:05:32 +0000

Actually im having an issue with the width. If I do this it works fine in ff and chrome but not in ie. If I keep it the way you specify then in all browsers it pushes the left side to center. What am I doing wrong?
.lightbox { left: -999em; position: absolute; }
.lightbox { left: -999em; position: absolute; }
.lightbox:target { bottom: 0; left: 0; right: 0; top: 0; position: absolute; }
.lightbox:target .close a { background: rgba(0, 0, 0, 0.75); bottom: 0; left: 0; right: 0; top: 0; position: absolute; z-index: 101; }
.close span { color: #FFFFFF; font-size: 2em; text-indent: 0; position: absolute; right: 0.5em; top: 0.5em; }
.close {text-indent: -999em;}
.lightbox:target div { background: #FFFFFF; position: absolute; left: 5%; top: 50%; z-index: 200; }
.w60p { margin-left: -200px; width: 400px; } .w300 { margin-left: -400px; width: 800px; } .w900 { margin-left:-450px; width: 900px; }
.h60 { height: 500px; margin-top: 10px; } .h400 { height: 600px; margin-top: -300px; } .h386 { height: 386px; margin-top: -193px; }
.scroll { overflow-y: scroll; padding: 0 1em; }
.boxfocus { bottom: 0; left: 0; right: 0; top: 0; position: absolute; }
.boxfocus div { background: #FFFFFF; position: absolute; left: 50%; top: 50%; z-index: 101; }
.boxfocus .close a { background-image: url(‘trans.png’); bottom: 0; left: 0; right: 0; top: 0; position: absolute; z-index: 101; }
/* lightbox created by http://www.hitechy.com, thank you! */