Efecto para apagar las luces para ver vídeos

By: Iván Dangerfield en lunes, diciembre 30, 2013
Este truco es unos de los que más me gustan y más llamativos a la hora de visualizar vídeos en internet, y este script nos lo ofrece la página web de Janko y cómo no, usa jQuery, para crear dicho efecto. El efecto es fascinante, al hacer click en apagar las luces, hace que toda la página se oscurezca, menos el vídeo, la película que estés viendo, tu vídeo de Youtube favorito, o la televisión on-line que estés visionando. De este modo, no habrá otros elementos que nos distraigan, y la apariencia del efecto parecerá que estemos en el cine, de nuestra localidad. A continuación puedes ver una demostración de lo que estamos intentando explicar:
Apagar las luces

1. Para insertar o incrustar este maravilloso efecto en tu blog de Blogger, por ejemplo, sería de la siguiente forma que te mostramos a continuación o seguidamente, sigue los pasos no tiene perdida:
2. Entra en Blogger
3. A continuación ingresas en Plantilla
4. Ahora en Editar Html
5. Busca la etiqueta </head> en tu plantilla
6. Y antes de dicha etiqueta añades el siguiente script
7. Atención: si ya tienes insertado jQuery en tu plantilla, omite la primera línea de código.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type="text/javascript">
//<![CDATA[ 
$(document).ready(function(){
$("#oscuro").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#oscuro").toggle();
if ($("#oscuro").is(":hidden"))
$(this).html("Apagar las luces").removeClass("turnedOff");
else
$(this).html("Encender las luces").addClass("turnedOff");
});
});
//]]>
</script>

Si tienes insertado Mootools o Scriptaculous en tu plantilla, usa este parche que ves a continuación:

<script type="text/javascript">
//<![CDATA[ 
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("#oscuro").css("height", jQuery(document).height()).hide();
jQuery(".lightSwitcher").click(function(){
jQuery("#oscuro").toggle();
if (jQuery("#oscuro").is(":hidden"))
jQuery(this).html("Apagar las luces").removeClass("turnedOff");
else
jQuery(this).html("Encender las luces").addClass("turnedOff");
});
});
//]]>
</script>

Ahora añade los estilos en CSS antes de ]]></b:skin>

/*Truco apagar las luces en Aizum Blog*/
#videolights {
position:relative;
z-index:102;
}
#apagar {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
margin: 25px 0 0 60px;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(http://lh6.googleusercontent.com/-azJxijJlWX4/T3vT2giQqkI/AAAAAAAACWk/6wt4sBdcHEY/s16/luces-on.png); /* icono bombilla en On */
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
text-decoration:none;
}
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
background-image:url(http://lh4.googleusercontent.com/-J0U5xRqb7KU/T3vT2kcmUsI/AAAAAAAACWo/-VTwo42-Nj0/s16/luces-off.png);  /* icono bombilla en Off */
}
#oscuro {
background:#000; /* Color del fondo */
opacity:0.7; /* Opacidad de la pantalla */
filter:alpha(opacity=70); /* Opacidad de la pantalla */
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

Ahora añade el siguiente código antes de </body>

<div id='oscuro'/>

Y por último, dónde quieras poner tu vídeo, usa este código!

<center>
<div id="apagar"><a class="lightSwitcher" href="javascript:void(0);">Apagar las luces</a></div>
<div id="videolights">
...Aquí el código embed del video...
</div>
</center>

Eso es todo, espero que disfrutéis de este tip tan genial, y apagar las luces para ver vídeos, si tenéis miedo encenderlas, espero que os guste, enjoy!
Get free premium widgets for your blog and website.