JQuery ile Video Büyüklüğü Değiştirme

 bcakir
 13 Ocak 2012

Merhaba arkadaşlar, sizlerden gelen istek üzerine daha önce yaptığım JQuery ile sinema modu uygulamasını geliştireceğiz. Bu yazıda, kaydırma butonundan (slider input) değiştirilen değere göre videomuzun büyüklüğünü dinamik olarak büyüterek ya da küçülterek değiştireceğiz. Ayrıca, önceki uygulamamızda yaptığımız gibi sinema moduna geçme işleminine ek olarak, sinema modunda videoyu ekranın ortasına yerleştirme ve değiştirilen boyutlarına göre ekranda hep ortalanmasını da yapacağız. Uygulamamızda kaydırma çubuğundan veri alma işlemi için hazır bir JQuery kütüphanesi kullanacağım. Geri kalan kısımlarını, kullanıcının girdiği değere göre videoyu ekranın ortasına getirme ve videoyu büyütmeyi daha önce yaptığımız sinema modu uygulamasının üzerine ekleme yaparak geliştireceğim. Bu uygulamayı iyice anlamak için önce yaptığımızı da incelemenizde fayda var. Uygulamayı çalıştırabilmek için hazır kütüphanelere ve stil dosyalarına ihtiyaç duyacağınız için yazının sonunda uygulamamızın tamamını indirebilirsiniz. Şimdi uygulamamızı yapmaya başlayalım.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9"/>
<title>JQuery ile Video Büyüklüğü Değiştirme</title>
<link rel="stylesheet" href="css/jslider.css" type="text/css" />
<link rel="stylesheet" href="css/jslider.blue.css" type="text/css" />
<link rel="stylesheet" href="css/jslider.plastic.css" type="text/css" />
<link rel="stylesheet" href="css/jslider.round.css" type="text/css" />
<link rel="stylesheet" href="css/jslider.round.plastic.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dependClass.js"></script>
<script type="text/javascript" src="js/jquery.slider-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".resim").click(function(){
        //ekran karartma ve slide butonu ekleme
        $('<div id="sinema"></div>').appendTo("body");
        $('<div id="slider_bar"></div>').appendTo("#sinema");
        $('<input id="slider_btn" type="slider" name="slider_btn" value="20" />').appendTo("#slider_bar");
        //slide butondan değer alma
        jQuery("#slider_btn").slider({
            from: 600,
            to: 800,
            step: 10,
            round: 1,
            dimension: ' px',
            skin: "round",
            calculate: function(value){
                //video boyutunu değiştir
                boyutlandir(value);
                return value;
            }
        });
        $('#sinema').css({"opacity": '0.7'});

        //videoyu ilk haline geri getirme
        if($("#sinema").is(":visible")){
            $(".resim").attr("src", 'isik_ac.png');
            $("#sinema").fadeOut(300);
            $(".video").width(600);
            $(".video").height(400);
            $(".video").css({"margin-top": '0px', "margin-left": '50px'});
            //ekranın karartılma işlemini kaldırma
            $("#sinema").hide(300, function(){$(this).remove();})
        }else{
            //videoyu ortala
            $(".resim").attr('src', 'isik_kapa.png');
            $("#sinema").fadeIn(300);
            //ekranın ortasını ayarlama
            var window_x = ($(document).width()/2)-(600/2);
            var window_y = ($(document).height()/2)-(400/2);
            $(".video").css({"margin-top": window_y+'px', "margin-left": window_x+'px'});
        }
    });
});

//video boyutunu değiştirme fonksiyonu
function boyutlandir(boyut){
    yukseklik=Math.round(boyut*2/3);
    $(".video").width(boyut);
    $(".video").height(yukseklik);
    //videonun değişen büyüklüğüne göre ekranın ortasını hesaplama
    var window_x = ($(document).width()/2)-(boyut/2);
    var window_y = ($(document).height()/2)-(yukseklik/2);
    $(".video").css({"margin-top": window_y+'px', "margin-left": window_x+'px'});
}
</script>
<style>
body {background: #eef0f7; margin: auto}
#slider_bar {width: 400px; padding: 20px; margin: auto}
#sinema {background-color: #000; width: 100%; height: 100%; position: fixed; z-index: 4; display: none}
.video {position: absolute; z-index: 10; margin: 0 0 0 50px}
.resim {position: absolute; z-index: 5; cursor: pointer}
</style>
</head>
<body>
<img src="isik_ac.png" class="resim" />
<embed src="http://www.youtube.com/embed/UMwuY_-I1jQ" width="600" height="400" class="video" />
</body>
</html>

Uygulamamızın geliştirme işlemini bitirdik. Çalıştırmanız için gerekli olan, bütün dosyaların ziplenmiş halini buradan indirebilirsiniz. Kişisel olarak da beğendiğim bir uygulama oldu diyebilirim. Özellikle video ile ilgili sitelerin çok fazla işine yarayabilir. Gerekli bütün dosyaları da sizlerle paylaşarak bir uygulamamızın daha sonuna geldik. Yararlı olması dileğiyle.

 834 Okunma

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

  1. Hocam süpersin ya tam istediğim kod çok tşkederim yazılarının devamını sabırsızlıkla bekliyorum (:

  2. teşekkürler, güzel bir çalışma olmuş, emeğinize sağlık

  3. Bu kodları bir türlü wordpress e uyarlamayadım

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

Daha fazla Css, JQuery
Kapat