Site ışıklarını kapatma diye bir buton film izleme sitelerinde mutlaka karşılaşmışsınızdır. Film izlerken sitedeki reklamları, menüleri, butonları, resimleri kısacası video ekranı hariç her tarafı karartmaya yarayan bir özelliktir. Ziyaretçiler açısından çok faydalı bir uygulamadır.  Bunun kısa yoldan sitenize ekleyeceğiniz html kodu yok maalesef. Javascript dosyaları bir hosta yükleyio kullanmanız gerekiyor.

Daha önceleri  bir  film izleme sitesinde  bu  eklentinin bir benzerine  rastlamıştım. Videoların altında  bulunan ampul ikonuna  tıklandığında video  hariç sitenin tamamı karartıp kullanıcı daha zevkli  ve  göz  ağrıtmayan bir şekilde  videoları izleyemesine imkan sağlıyordur. Genel amaçta bu aslında her taraf karardığında  göz  sadece  aydınlık  olan bölüme  odaklanıyor  ve daha net  video izleme fırsatı  olabiliyordu bu şekilde.  Pierre VION  tarafından geliştirilmiş olan Allofthelights uygulaması web sitenize bu tarz bir özellik eklemenize yarayan bir örnektir.

Allofthelights’ı kullanabilmeniz  için illa  film siteniz  olması gerekmiyor  elbette. Hemen hemen her  blog  sitesi  video yayınları yapıyordur  mutlaka. Allofthelights’ı  kullanarak çok kolay bir şekilde site karartma efektini  sitenizde uygulayabilirsiniz.

Allofthelights kullanımı çok  basit  tek yapmanız  gereken sitenizin head etiketleri arasına  Javascript dosya adreslerini  eklemek  ve  yazılarınızda ekleyeceğiniz  video iframe kodunun içine id=”video” kodunu  eklemek. Bu kod  hangi çerçevelerin karartılıp hangilerinin karartılmayacağını tespit etmeye yarıyor. Tabi  birde  ışıkları kapatabilmesi  için  buton da eklemeniz gerekiyor. Buton kodunu <div id=”switch”></div> şeklinde  kullanabilirsiniz.

Allofthelights’te  hoşuma giden diğer  bir özellik benim gibi mouse  tiki (yeryüzünde  benden başka birinde  olabileceğine  inanmıyorum) yani mouse  düğmelerine  sertçe basan kişiler  için mükemmel bir çözüm. Açık sayfalarda  sürekli  linklerin olmadığı yerlere tıklar tıklar dururum. Öyle bildiğiniz  yavaş tıklamada  değil mouseyi kırarcasına tıklıyorum bür türlü içim rahatlamıyor 😀 Bu nedenle  sürekli başka  sayfalara yönlendiğim zamanlar da oluyor haliyle. Web site ışıkları kapatıldığında  tıklanalabilir ( linkler, resimler, videolar vs) bütün alanlar da devre dışı kalıyor.

 Test edilen tarayıcılar : Chrome 21.0, Firefox 15, Opera 12.0, Safari 4.0, IE7, IE8 ve IE9.
Kullanım : 

• Head etiketleri arasına eklenmesi gereken bölümler.

Js  ve Css adresleri :  

<link rel="stylesheet" href="jquery.allofthelights.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="jquery.allofthelights.min.js"></script>

•  JavaScript : 

<script>
$(document).ready(function() {
	$("#video").allofthelights();  
	});
</script>

•  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<div class="container">
	<div id="switch"></div>
	<iframe id="video" width="600" height="338" src="https://www.mintik.com/video adresi" frameborder="0" allowfullscreen></iframe>
</div>