Azi este Joi, 14 de August.2017

cu reduceri

"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/AVvXsEjUhEyYw7a0C61JgngaLRAvbO4e4SL1eZiYInbj92ptlR6zgo1Nu-ahEXOxWecNVbZQsews2LwDc-QrkH_b6J2ZKFnRmK2_LvWmkXV5ujhX-yyUnqCgal5KNeV7ZkQXXrKWXB4IeZZSv6o/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/AVvXsEhLs_TkDTa62TSpjwXlJ802aY8l95XQ_wzklEg30aFBE8eYNlAi3VQnvlTkjYvZyCzNvxMtpeZwklTsLFJzZNcXyEvWe448oukJD9vbfJC6Yvdd5SyT2UyQXZGQ7wYoUY0e8jP4vHRZI7s/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>
SUCCES!

Related Posts:

  • Afla cine a fost prima ta persoana pe Twitter?In acest moment toti stim ce reprezinta reteaua de socializare Twitter si foarte multi dintre noi avem inscrise multe persoane dar o curiozitate ne urmareste uneori cel putin pe mine: oare cine a fost prima persoana care s-a … Read More
  • Text intermitent cu JavascriptPentru a folosi acest truc mergi la Aspect -- obiect gadget HTML / Javascript, si adaugi urmatorul cod:<script language="JAVASCRIPT">//<![CDATA[FO1="AICI VINE TEXTUL 1.";FO2="AICI VINE TEXTUL 2.";U=FO1;cny=0;function… Read More
  • Noile butoane oficiale de TwitterDe cateva zile sunt disponibile oficial noile butoane si se poate obtine codul lor direct de pe pagina ta Twitter.Acestea se gasesc la sectiune "Extras" unde apare un nou buton de twittear click pe el si la deschiderea pagini… Read More
  • Tooltips cu CSSTooltips sunt descrieri de avertizare explicative pentru un anumit text sau informatie. Ceva asemanator in HTML este atributul title ce face acelasi lucru, afiseaza o descriere de un linck sau de o imagine de exemplu pune mou… Read More
  • Linie de separatie cu efect interesant pentru blogPoti adauga urmatorul cod <hr> cu ajutorul caruia obti o linie de separatie pe care o poti folosi unde doresti pe blog si rezultatul este urmatorul vezi linia de de mai jos Daca doresti sa schimbi culoarea sau linia sa … Read More

2 comentarios:

  1. Interesant!

    As avea o intrebare: daca in albumele din Picasa, o poza este adaugata pe blog (.blogspot) si eu mut acea poza in alt album, linkul pozei se va schimba si poza nu va mai aparea pe blog?1 :-?

    RăspundețiȘtergere
  2. Salut Laurentiu, o data ce imaginea este gazduita pe blogul tau (blogspot) aceasta nu isi schimba link-ul decta daca tu o retragi de pe blog.

    RăspundețiȘtergere

Bine ai venit!
In continuare poti lasa mesajul tau.

Multumesc