Jquery / tiyatro modu

Merhabalar, uzun süredir kodlarla ilgili birşey yazmıyordum ama geri geldim ve gene jquery’nın bir eklentisinden bahsedeceğim size.. 🙂 Bazılarınız video seyrederken vs görmüştür, bir buton ile arkaplan koyulaşıyor ve videoyu izlerken dikkatiniz başka bir yerlere kaymıyor, daha güzel bir ortam oluşmuş oluyor o sayfa içinde 🙂

Bunu kullanmak isteyenler olabilir diye düşündüm ve bu sefer herzamankinin aksine üşenmeden siteme de yazayım diye düşündüm, bu arada üşenmesem ne kodlar varda işte üşengeçlik sagolsun birşey yazamıyorum.. Neyse ben hemen kodlara geçeyim isterseniz 🙂

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>:: вuяαк кαşıкcı ::</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.theatermode.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body").theaterMode({
imgClass: ".theaterBtn",
imgTitleLightOff: "Işıklar Sönsün!",
imgTitleLightOn: "Işıklar Açılsın!",
imgSrcLightOff: "lightoff.png",
imgSrcLightOn: "lighton.png",
opacity: 0.85,
speed: 500
});
});
</script>
<style type="text/css">
img {border: 0;}
#theater {background-color: #000; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 25; display: none;}
</style>
</head>
</head>
<body>
<img src="lightoff.png" width="40" height="40" alt="" class="theaterBtn" title="Işıklar Sönsün!" style="position: absolute; z-index: 100; cursor: pointer;" />
</body>
</html>

Opacity özelliğinden butona tıklanınca arkaplan’ın ne kadar kararacağını ayarlayabiliyoruz, speed özelliği de adından belli olduğu gibi hızı ayarlamamızı yarıyor.
Siz buton yerine başka bir resime bu özelliği vermek isterseniz classına theaterBtn adını vermeniz yeterli olacaktır.

Bu kadar basit yani bu işlemi yapmak, tek yapmanız gereken jquery theatermode dosyasını kullanmak o kadar. O dosyaya da örnekten ulaşabilirsiniz isterseniz..
Örnek dosyayı indirmek için : tıklayınız.
Demo olarak bu olayı görmek isterseniz de dosyaya buradan ulaşabilirsiniz.
Veya direk link http://blog.burakkasikci.com/ornekler/tiyatromodu/index.html

Genel olarak web üzerine yoğunlaşan, gaza gelmek için müzik dinleyen, amatör olarak resim çekmeye çalışan, bir yandan özel bir şirkette çalışıp, diğer yandan da okumaya devam eden sıradan bir ölümlü. He bide buraların sahibi.

6 comments On Jquery / tiyatro modu

  • Merhabalar, şu anda askerlik görevimi yerine getirdiğim için detaylı bir yardım edemeyeceğim, önceden de yoğunluğumdan ve asker hazırlıklarımdan dolayı çok fazla yardımcı olamamıştım bunun içinde kusura bakmayın. Ama google’da wp theatre mode veya benzer kelimelerle arama yaparsanız böyle bir eklenti varsa kolay bir şekilde sitenize bunu ekleyebilirsiniz, eğer öyle bir eklenti yapılmamışsa da yukarıdaki kodları temanızda ilgili yerlere eklerseniz rahat bir şekilde bu eklentiyi kullanabilirsiniz.

  • peki bunu wp film temasına nasıl entegre edebiliriz yardımcı olabilirmisin

  • Evet fırsat bulduğumda koyacağım.
    Pazartesinden beri uygun zamanı bulamadığım için henüz yapamadım.
    Ama video’nuzun gözükmesi için kısaca şu yolu izleyebilirsiniz;
    Öncelikle video’nuzu bir divin içine alır bunu istediğiniz yere koyarsınız, sonra bu div’i gizlersiniz.
    Ekranı karartmak için kullandığım butonun onclick’ine de bu gizlediğiniz div’i göstermek için ilgili kodu yazarsınız.
    Butona bastığında bu gizlenen div’i göstereceği için ekran kararırken videonuz ortaya çıkmış olur.
    Tekrar tıklandığında da tam tersi işlem yaptırıp, bu div’i gizlerseniz isteğiniz olmuş olur.

  • selam burak bey vıdelu uygulamayı koyacaktınız sıteye ?

  • Merhabalar,
    Şu anda biraz yoğunum fakat gün içinde örnek uygulamayı buraya ekleyeceğim.
    Tşk eder size de iyi çalışmalar dilerim.

  • merhaba ben bu uygulamada ornek bır vıdeonunda nasl koyuldugu hakkında bılgı almak ıstıyorum yanı butona basıldıgında ekran kararınca vıdeoda ortaya cıkmasını ıstıyorum ne yapablırım
    iyiçalışmalar

Leave a reply:

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.