Azi este Joi, 17 de Aprilie.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:

  • Adauga o imagine de fond la o postare sau gadgetCu ajutorul acestui truc (folosind silul de fond DIV) se poate adauga un fundal pe blogul tau intr-o postare sau intr-un gadget HTML/Javascript.Copiaza codul de mai jos si adauga-l unde doresti ori de cate ori doresti pe blog… Read More
  • Trucuri pe blog - introduce numai audio de la YouTubeIdea este practica si simpla.De multe ori ne place sa ascultam audio (melodie) de la un video de YouTube dar imaginea nu este interesanta.Am gasit video cu muzica foarte buna dar cine a postat video, a facut o prezentare de i… Read More
  • Pozitionare mai buna a unui blog in motoarele de cautareBlogger include in mod implicit codul "nofollow"Această opţiune anuleaza robotii motoarelor de cautare (Google,Yahoo,Bing etc) sa citeasca adrese url care sunt incluse în comentarii şi backlink-uri, deci nu vor fi luate în co… Read More
  • Download imagini blogAcest truc este bun pentru cei care au un blog de download imagini de fundal si nu numai. Când încarci o imagine pe Blogger se gneneraza un cod ca acesta:<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {… Read More
  • Link automatUn prieten mi-a pus o intrebare curioasa:Exista posibilitatea de a pune un link si cand trece mouse-ul peste el sa se deschida automat?Sincer nu imi trecuse prin cap asa ceva dar pentru ca, omul astepta un raspuns, am modific… 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