Videolar için ışıkları aç kapa eklentisi

Bu eklenti hepimizin işine yaryıcak güzel bir eklenti genellikle video paylaşımları yapan  siteler için kullanılabilir eklentimizin özelliği ışıkları aç kapa özelliğidir. siz video izlerken  videonun hemen üstünede bulunan  buttona tıkladığınızda sinema tarzında bir video izlenimi sunuyor.

Demosuna burdan baka bilirsiniz.

Demo

şablon kısmını açıp html düzenle diyip </head> kodunu buluyoruz aşağıdaki kodları üstüne yerleştiriyoruz

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

Tekrar şablonu genişleterek yine </head> kodunun üstüne aşağıdaki ajax kodunu ekliyices yanlız şunuda hatırlatalım sizin temanızda bu ajax kodu varsa bunu eklemenize gerek yok temanızda yoksa bunu ekliyorsunuz çünki sizin temanızdada varsa bunuda eklerseniz kodlar çakışma yapıyor eklenti çalışmıyabilir.

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

daha sonra yine şablondan bu sefer css kodlarımı eklices bu kodu bulup ]]></b:skin> hemen üstüne aşağıdaki kodları yerleştirelim

----------------------------------------------- */
#lightsVideo {
position:relative;
z-index:102;
}
#switch {
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/AVvXsEhVNYTOI1FlM5oXT1ZbyB9_T-gVC2ve60h_A3sCfLiwBayt5-M33nJc2dXbAxZHfVzrW9BtAgKwVsog7blQYrpD1bV6BxtEyQfKpNQAVMepKaPfoyNnwhGStzZgOf_qJRxM5exaSDJPmoHV/s1600/lights-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/AVvXsEhZzBOWB7-lV8C526zJrZKTwgnHIW5z3Uq-v_hRpUB4RM_fsXlbYPIHRZ8NdFnqOA0f_dZ9fXuDROfdXa4QpmhUXUrQul52Krp3sr_vC8Irgocv1g3FK9oJzwjTROGvXq_CB1w0d3vgMj32/s1600/lights-off.png);
}
#darkness {
background:#000;
opacity:0.8;
filter:alpha(opacity=80);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

Yine aynı işlemle bu sefer </body> kodunu buluyoruz ve üstüne ekliyoruz

<div id="darkness"></div>

Son olarak aşağıdaki kodları ise konu ekliyiceğimiz zaman kodları konumuzu yazdıktan sonra html tıklayıp aşağıdaki kodları video ekliyiceğimiz zaman eklices

<center>
<div id="switch">
<a class="lightSwitcher" href="javascript:voidundefined0);">Turn off the lights</a></div>
<div id="lightsVideo">
...Buraya video'nun kodunu ekliyoruz...
</div>
</center>