jquery dim the lights script

Posted on 02/03/2010 - 16:08 by jack

This script uses CSS and the jQuery library to create a sexy "dim the lights" effect whilst watching flash video.

We use jQuery to bring a semi-transparent layer over the top of all the content except for the video and the buttons. We haven't set z-index on any of the layers in the demo. If you find that other items in your page are sticking over the top of the blackout layer... you might want to look into doing that.

The transparency is handled by jQuery and looks great in most browsers (Win: FF, Chrome, IE7+ & Safari AND Mac: Safari, Firefox). Let me know if you have trouble with it in other browsers.

NOTE: I'm using flow player in my example... but you can use any player you want. The key here is to give the video the css property "position:absolute", thats what keeps it above the blackout layer.

view the demo download files

Add new comment

Comments

Very smooth mate.

# Submitted by Jonathan Puddle (not verified) on Sat, 07/17/2010 - 12:01.

Very smooth mate.

Thanks mate! I've made a few

# Submitted by jack on Sat, 07/17/2010 - 12:02.

Thanks mate! I've made a few tweaks recently to fix some bugs with Safari for Mac.

Thank you for this great

# Submitted by Chris (not verified) on Sat, 07/17/2010 - 12:02.

Thank you for this great script! Exactly what I was looking for.

As a suggestion for improvment I'd say it's more user-friendly if the css is seperated from the HTML aswell as the js (connecting the divs) also seperated from the HTML. For the js you could use a init.js-file. And please do not put unnecessary styling in your sheets, it makes a hassle to pick out only what's needed.

Anyway, smooth script. Again, thanks a lot man :)

Chris - Thanks for the

# Submitted by jack on Sat, 07/17/2010 - 12:03.

Chris - Thanks for the suggestions... I'll bear those in mind!

Main menu

jquery dim the lights script