Algunos de los videos que podemos encontrar en YouTube poseen una propiedad interesante llamada “Apaga las luces“. Su atractivo es que al seleccionarlo, la página se oscurece y permite ver el video como en una sala de cine.

Por si no lo sabías, hay una forma de implementar esta función utilizando jQuery. En el siguiente tutorial les explicaremos de qué forma pueden implementar este genial y sencillo efecto.

El problema

Nuestro ejemplo es simple. Consiste en una cabecera, el video, el botón “Apagar las luces” y la barra lateral con información del video. En el código que verás a continuación podrás apreciar el div “command” que contiene el link “lightSwitcher”, el div “movie” que contiene el video y el div “description” que actúa como barra lateral.


<div id="container">
<div id=”header”>
<h1>Janko At Warp Speed</h1>
<h2>Turn off the lights - demo</h2>
<div id=”command”>
<a class=”lightSwitcher” href=”#”>Turn off the lights</a>
</div>
</div>
<div id=”movie”>
<object width=”560″ height=”340″>
<param name=”movie” value=”http://www.youtube.com/v/Mlahvvymkxc&hl=en&fs=1&color1=0×3a3a3a&color2=0×999999″ />
<param name=”allowFullScreen” value=”true” />
<param name=”allowscriptaccess” value=”always” />
<embed src=”http://www.youtube.com/v/Mlahvvymkxc&hl=en&fs=1&color1=0×3a3a3a&color2=0×999999″
type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”560″ height=”340″>
</embed>
</object>
</div>
<div id=”description”>
<p>Some description ges here</p>
</div>
</div>


El CSS para esto es sencillo:


body {font-family:Arial, Sans-Serif; font-size:13px; text-align:center; margin:0px; }
#container { width:960px; margin:0px auto; text-align:left; overflow:hidden;}
#movie {border:solid 1px #dcdcdc; float:left; width:560px; text-align:left; margin-right:20px;}
#description { float:left; width:320px;border:solid 1px #dcdcdc; padding: 10px 20px;}
.lightSwitcher {background-image:url(light_bulb_off.png); background-repeat:no-repeat; background-position:left;
padding: 0 0 0 20px; outline:none; text-decoration:none;}
.lightSwitcher:hover {text-decoration:underline;}


Que se haga la… oscuridad

Cuando se hace clic sobre el link “Apaga las luces”, necesitamos que se oscurezca toda la página. Todo, a excepción de la película. Esto se puede lograr utilizando un div que debe tener exactamente las mismas dimensiones que el documento actual y un fondo negro semi-transparente. Este div necesita ser posicionado de forma absoluta dentro de su container posicionado relativamente (y eso es BODY) y debe extenderse desde la esquina superior izquierda hasta la esquina inferior derecha.

Añadamos un div al final de nuestro markup:

<div id="shadow"></div>


Aquí algo importante es z-index. Para lograr que cubra la página completa, debe tener el z-index más grande. Los elementos embebidos se verán, de cualquier forma. Es fácil posicionar un div en la esquina superior izquierda y programar su ancho en un 100%. ¿Pero qué pasa con la altura? Si programamos la altura de nuestro div “shadow” en un 100% el mismo cubrirá toda la página sólo si contiene algo más largo que una ventana o si tenemos scrollbars. De otra forma, sólo tapará el contenido.

Involucremos jQuery:

$(document).ready(function(){
$(”#shadow”).css(”height”, $(document).height()).hide();
});

Y…. Acción!

Este código programa la altura del div “shadow” a los mismos valores de la altura del documento y lo esconde. Por supuesto, queremos que este div sea visible sólo cuando hacemos clic en “lightSwitcher”. Ahora debemos añadir un administrador de clic para lightSwitcher (encendedor de luz):

$(".lightSwitcher").click(function(){
$(”#shadow”).toggle();
});

Si intentas utilizar esto ahora verás que funciona. LightSwitcher podrá activar y desactivar la visibilidad del div “shadow” y eso simulará el encendido y apagado de las luces. El único problema es que el propio link se encontrará en “la oscuridad” y no podrás hacer clic en el mismo nuevamente una vez que hayas apagado las luces.

La solución es simple: LightSwitcher tiene que tener z-index más alto que el div “shadow”. Para lograr esto, debemos posicionar el link de forma absoluta dentro de su container posicionado relativamente y programar z-index en 101:

#command { position:relative; height:25px; display:block;}
.lightSwitcher {position:absolute; z-index:101; background-image:url(light_bulb_off.png);
background-repeat:no-repeat; background-position:left; padding: 0 0 0 20px;
outline:none; text-decoration:none;}

Ahora sí funcionará. Si miras el demo notarás que mientras apagas las luces el texto del link y el ícono cambian. Para poder llevar a cabo esto es necesario extender nuestro CSS y jQuery un poquito. Cuando apagas las luces, la luz del icono de la bombilla y el texto cambian, y el color del link se vuelve amarillo. Necesitamos definir una clase CSS que le dará estilo al link y añadir algo de jQuery para cambiar el texto y activar esta clase CSS:

.turnedOff {color:#ffff00; background-image:url(light_bulb.png);}

Extenderemos el administrador de clic un poco para lograr este resultado:

$(".lightSwitcher").click(function(){
$(”#shadow”).toggle();
if ($(”#shadow”).is(”:hidden”))
$(this).html(”Turn off the lights”).removeClass(”turnedOff”);
else
$(this).html(”Turn on the lights”).addClass(”turnedOff”);
});

Ahora ya tenemos un interruptor de luz completamente funcional. Al final, el código completo lucirá de esta manera:

CSS

body {font-family:Arial, Sans-Serif; font-size:13px; text-align:center; margin:0px; position:relative;}
#container { width:960px; margin:0px auto; text-align:left; overflow:hidden; position:relative;}
#movie {border:solid 1px #dcdcdc; float:left; width:560px; text-align:left; margin-right:20px;}
#description { float:left; width:320px;border:solid 1px #dcdcdc; padding: 10px 20px;}
#command { position:relative; height:25px; display:block; margin: 25px 0 0 0;}
.lightSwitcher {position:absolute; z-index:101; background-image:url(light_bulb_off.png);
background-repeat:no-repeat; background-position:left; padding: 0 0 0 20px;
outline:none; text-decoration:none;}
.lightSwitcher:hover {text-decoration:underline;}
#shadow {background-image:url(shade1×1.png); position:absolute; left:0; top:0; width:100%; z-index:100;}
.turnedOff {color:#ffff00; background-image:url(light_bulb.png);}

jQuery

$(document).ready(function(){
$(”#shadow”).css(”height”, $(document).height()).hide();
$(”.lightSwitcher”).click(function(){
$(”#shadow”).toggle();
if ($(”#shadow”).is(”:hidden”))
$(this).html(”Turn off the lights”).removeClass(”turnedOff”);
else
$(this).html(”Turn on the lights”).addClass(”turnedOff”);
});
});

Haz clic aquí para ver un demo»

Haz clic aquí para descargar el código fuente »

Fuente: Janko at Warp Speed

¿Te gusta este artículo? Compártelo con tus amigos!