Matikan Lampu Dengan JQuery

Bagi mereka yang menikmati menonton video di internet, ini adalah sebuah script yang sangat berguna yang dibuat oleh Janko dengan jQuery. 

Jadi apa script ini tidak? Ini akan "mematikan lampu" sehingga semua yang Anda miliki di halaman tersebut akan memudar gelap kurang video, sehingga tidak akan ada unsur-unsur lain yang akan mengalihkan perhatian kita saat menonton video dan kami akan merasa seperti di bioskop. 

Anda dapat melihat contoh di sini dengan meng-klik pada link yang mengatakan "Matikan lampu". 
Kapanpun Anda ingin, maka Anda dapat mengklik pada link lagi dan itu akan menyalakan lampu kembali. 

Matikan lampu

Untuk menempatkan efek ini "lampu" di blog, pergi ke Template> Edit HTML dan sebelum </ head> tag (CTRL + F untuk menemukannya), menyisipkan script: 

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
/ / <! [CDATA [
$ (Document). Ready (function () {
.. $ ("# Kegelapan") css (. "Tinggi", $ (document) tinggi ()) hide ();
$ (". LightSwitcher"). Klik (function () {
$ ("# Kegelapan") beralih ().;
if (. $ ("# kegelapan") adalah (": hidden"))
$ (Ini) html ("Matikan lampu") removeClass ("turnedOff")..;
lain
.. $ (Ini) html ("Nyalakan lampu") addClass ("turnedOff");
});
});
/ /]]>
</ Script>

Kemudian tambahkan sebelum]]> </ b: skin> gaya CSS: 

 / * Matikan lampu
----------------------------------------------- * /
# LightsVideo {
position: relative;
z-index: 102;
}
# Saklar {
max-width: 640px;
text-align: left;
position: relative;
height: 25px;
display: block;
margin: 25px 0 0 60px;
}
. LightSwitcher {
position: absolute;
z-index: 101;

background-repeat: no-repeat;
background-position: left;
padding: 0 0 0 20px;
garis besar: none;
text-decoration: none;
}
. LightSwitcher: hover {text-decoration: underline;}
. TurnedOff {
color: # ffff00 penting;

}
# Kegelapan {
background: # 000;
opacity: 0.8;
filter: alpha (opacity = 80);
position: absolute;
kiri: 0;
top: 0;
width: 100%;
z-index: 100;
}

Klik pada panah untuk memperluas gaya

Kemudian, sebelum </ body> tag, tambahkan ini: 

 <div id='darkness'/>

Dan akhirnya, di mana pun Anda menempatkan video Anda, baik posting atau gadget HTML / Javascript, gunakan kode ini: 

 <center>
<div id="switch"> <a class="lightSwitcher" href="javascript:void(0);"> Matikan lampu </ a> </ div>
<div id="lightsVideo">
... Ini dia kode video ...
</ Div>
</ Center>

Tambahkan kode video Anda ke tempat yang ditunjukkan dan hanya itu. Sekarang Anda dapat menikmati video Anda dengan lampu off! 

Ingat bahwa trik ini menggunakan jQuery, jadi jika Anda menggunakan Scriptaculous atau Mootools Anda harus menerapkan patch, dan jika Anda menggunakan versi lain dari jQuery, Anda harus menggunakan hanya satu.