jQuery lights off effect

I’ve been working on a “lights off” effect for videos the other day. Here’s a demo page (with the appropriate code) that I might turn into a proper plugin if there is enough interest. Enjoy…

$(document).ready(function(){
	
		// Build the link
		$('.lightsoff').append('<div class="lightsoffbtn"><a href="#">Lights Off</a></div>');
		
		// Prepare the overlay
		$('body').append('<div class="lightsoff-ovelay off" style="position:relative; z-index:1; display:none;">close</div>');
		
		// Variables
		var $overlay = $('.lightsoff-ovelay'),
			$containers = $('.lightsoff'),
			$lightsoffTrigger = $('.lightsoffbtn a');
	
			
		// LightsOff events
		$lightsoffTrigger.each(function(){
		
			// Variables
			var $container = $(this).parent().parent();
	
			// Apply some CSS
			$container.css({ 'position': 'relative' });
	
			$(this).click(function(e){
	
				e.preventDefault();
					
				if ( $overlay.hasClass('off') ) {
	
					$container.css({
						'z-index': 4000
					});
	
					$overlay.css({
						'position': 'fixed',
						'display': 'block',
						'text-indent': -99999,
						'background-color' : '#000000',
						'width': '100%',
						'height': '100%',
						'top': 0,
						'left': 0,
						'z-index': 3000,
						'opacity': 0.7,
						'cursor': 'pointer'
					});
	
					$overlay.removeClass('off').addClass('on').fadeIn();
	
				} else if ( $overlay.hasClass('on') ) {
					e.preventDefault();
					$containers.css({ 'z-index': 0 });
					$overlay.removeClass('on').addClass('off').fadeOut();
				}
			
			});
		
		});
		
		$overlay.click(function(e){
			e.preventDefault();
			$containers.css({ 'z-index': 0 });
			$overlay.removeClass('on').addClass('off').fadeOut();
		});
	
	});Check out this Pen!

9 thoughts on “jQuery lights off effect”

  1. Looks good. May I suggest improving this script (like updating it to support the latest jQuery, and preventing clickable links (and images) from being disabled after switching the lights and then turning them back on?

    This will be awesome. Thanks alot!

  2. Nope, tried that. It only makes my page (including all the clickable images and links) unclickable, so I guess it’s not working with the latest version of jQuery.

    Thanks for the reply. :)

Leave a Reply