"Stinge lumina" pentru a viziona un video

Aceasta este una dintre script-uri care imi plac cel mai mult pentru vizionarea clipurilor video de pe net, este un script de Janko si functionează cu jQuery.


Acest truc "stinge luminile", da un efect de intuneric pe pagina cu excepţia cazului în care apare video, astfel încât nu exista alte lucruri care ne distrag atentia in timp ce viziona video si vom fi ca la cinematrograf.


Poti vedea un exemplu aici, apasand pe link-ul care spune "Stinge luminia." si cand doresti apesi pe link-ul "Aprinde lumina".

Pentru a utiliza acest efect intra pe Desing --> Editati HTML si in sblon cauta linia </head> , deasupra aceste lini adaugi urmatorul script:

<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(){
$("#oscuridad").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#oscuridad").toggle();
if ($("#oscuridad").is(":hidden"))
$(this).html("Stinge lumina").removeClass("turnedOff");
else
$(this).html("Aprinde lumina").addClass("turnedOff");
});

});


//]]>
</script>

dupa adaugam inainte de linia ]]></b:skin> urmatorul cod stil

/* Stinge lumina
----------------------------------------------- */
#videoLuces {
position:relative;
z-index:102;
}
#apagador {
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi94NZ0Ss8c5nzqpqSKeBsGu7Gg6Dn8gPASQS9ugjpaMjU4cIF3fgSuxJoKo1p3Q2_dxHA1nGllI-QryDX9_h2d-XkYyTeKzop8SQn4dyuJbFmvyUgdPtyi_3Wz4bN5hOBIcceCgghlDUI/s16/luces-on.png);
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXoRmWvhhMg_h4yBpODFGx2XO1Pwri3hPcfQe5pyLH-27lyUcRdPzyzxZ-Ltm5UnY8Lpsa5nx0fCkfsoAtPl0D4OAFgF_SQC4UX4PZFkNR-7Ocbg1GTMXfmZtZp79rl6CBJfzPaKeMYy0/s16/luces-off.png);
}
#oscuridad {
background:#000;
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

dupa care inainte de linia </body> adaugi,

<div id='oscuridad'/>

verifica daca totul este corect si slveaza modificarile.

Si, in sfarsit, unde doresti sa adaugi video, fie într-o intrare (postare), sau o componentă HTML/JavaScript (obiect gadget)folosind acest cod:

<center>
<div id="apagador"><a class="lightSwitcher" href="#">Stinge lumina</a></div>
<div id="videoLuces">
...Aici se ADAUGA codul video de youtube sau orice alt cod video...
</div>
</center>