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>