JQuery ile Sinema Modu

 bcakir
 27 Aralık 2011

Merhaba arkadaşlar, bu yazımda JQuery ile sinema modu yani arka planı karartıp videoya odaklandırma işlemini yapacağım. Bu uygulama ile videolarınız daha ilgi çekici hale gelecek. Ayrıca, bu uygulamayı resimlerinizi gösterirken de kullanabilirsiniz. Ben temel mantığını anlatacağım, nerede kullanacağınız biraz sizlerin yaratıcılığına kalacak. Uygulamamızın içeriği; ışığı kapa butonuna basılınca arkaplanın kararması ve aşığı aç butonuna basınca açılmasını içerecek. Uygulamanın resimlerini içeren bütün dosyayı yazının sonunda bulabilirsiniz. Yazımın içeriğini anlattığıma göre artık uygulamamızı geliştirmeye geçebiliriz.

<!DOCTYPE html>
<html>
<head>
<title>JQuery ile Sinema Modu</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".resim").click(function(){
        $('<div id="sinema"></div>').appendTo("body");
        $('#sinema').css({"opacity": '0.7'});

        if ($("#sinema").is(":visible")){
            $(".resim").attr("src", 'isik_ac.png');
            $("#sinema").fadeOut(700);
        }else{
            $(".resim").attr("src", 'isik_kapa.png');
            $("#sinema").fadeIn(700);
        }
    });
});
</script>
<style>
body {margin: auto}
#sinema {background-color: #000; width: 100%; height: 100%; position: fixed; z-index: 4; display: none}
.video {position: absolute; z-index: 10}
.resim {position: absolute; z-index: 5; cursor: pointer; margin: 360px 0 0 610px}
</style>
</head>
<body>
<embed src="http://www.youtube.com/embed/UMwuY_-I1jQ" width="600" height="400" class="video" />
<img src="isik_ac.png" class="resim" />
</body>
</html>

Uygulamamızı yukarıda yaptık. Siz css ile değişik tasarımlar verebilir ya da  opacity ve kararma hızını kolayca kendinize göre değiştirebilirsiniz. Özellikle video sitelerinde çok fazla gördüğüm bu özelliği sizlerle paylaşmak istedim. Uygulamayı buradan indirebilirsiniz. JQuery ile ilgili bir uygulamamızı daha tamamladık, yararlı olması dileğiyle.

 3.373 Okunma

Bu yazıya 16 yorum yapılmış.

  1. Hoşuma gitti çok. Arkaplanı karartmak ya da sitenin rengini kullanıcıya göre değiştirmek için bile kullanılabilir. Teşekkür ederim.

    • Teşekkür ederim, bir çok farklı amaç için kullanılabilir. Bu biraz yapmak istediğinizle (hayallerinizle ve yaratıcılığınızla) ilgili. Yararlı olduğum için sevindim.

  2. Sinema moduna geçirince video büyüyüp ekranın ortasına gelebilirmi?

    • Uygulamada else kısmını aşağıdaki şekilde düzeltirseniz olur. Css ile değişik tasarım vermeyi ve videoyu eski haline döndürmeyi siz yaparsınız artık.
      }else{
      $(“.resim”).attr(“src”, ‘isik_kapa.png’);
      $(“#sinema”).fadeIn(700);
      $(“.video”).width(750);
      $(“.video”).height(500);
      var window_x = ($(document).width()/2)-(750/2);
      var window_y = ($(document).height()/2)-(500/2);
      $(“.video”).css({“margin-top”: window_y+’px’, “margin-left”: window_x+’px’});
      }

  3. Kızıcaksın ama video eski haline getirmeyi yapamadım ya 🙁

    • Neyse bu bana iyi bir fikir verdi. Bunla alakalı yazı yazayım ben en iyisi 😀

      • ya son bi videoyu eski haline getirseydin çok süper olcaktı ya 😀

  4. Bak bunu yaparsan eğer bununla ilgili yazı yazıcaksan bir önerim daha olucak 😀

    • Söyle, iyi bir fikir olabilir. Yazıya ekleyebilirim.

      • videonun altında kaydurma çubuğu olsun dicektim yani mesela ne kadar kaydırırsa video o kadar büyüsün veya küçülsün büyüklüğününü o çubuğa göre ayarlasınlar dicektim.

        • Tamam yapacağım ama senden benim de bir ricam olacak. Paylaşımlarımdan daha fazla insanın yararlanmasını istiyorum. İstediğin uygulama direk olarak bir film sitesine yönelik olacağı için 😀 senden siteme tavsiye bağlantı şeklinde link vermeni rica edeceğim.

          • Tabiki eklerim zaten biri bi kod sorduğunda direk buraya gönderiyorum pek yorum yazmasamda uzaktan takipçinim 😀 Sitenin Uygun bir yerine eklerim sanırım alt tarafına eklerim iki tane 100 binlik sayfam var ondada paylaşırım ama gelen olurmu bilemem 😀

          • Teşekkür ederim, paylaşman yeterli benim için.

          • Ricaederim ne demek çok güzel paylaşımların var tam istediklerimi paylaşıyorsun asıl ben Teşekkürederim.

  5. Merhaba, ben bunu belli bir sayfaya eklemek istiyorum, yardımcı olursanız sevinirim. Verdiğiniz .zip dosyası içindekileri FTP’ye atmam yeterli olacak mıdır?

  6. Merhaba ekran yakınlaştırma olayı hazır olanı varmı bir türlü yapamadım.

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla Css, JQuery
Kapat