jsMovie

Küçükken defterin her sayfasına birbirine benzeyen kareler çizerdik. Daha sonra çizme işlemi bittikten sonra parmağımızla defterin köşesinden tutup hızlı bir şekilde teker teker sayfaları bıraktığımızda ortaya hareketli görüntüler çıkardı. Eskiden filmler de bu şekilde yapılırdı. Hatta çok eski olan filmleri izlerseniz  kareler arası geçiş anını fark edebilirsiniz. Elinizdeki benzer resimleri de movie maker kullanarak ard arda yerleştirirseniz eğer buna benzer görüntüler elde edebilirsiniz.

 Burkhardt‘ın yapmış olduğu jQuery jsMovie eklentisi de elinizde olan resimleri sırasıyla  hızlı bir şekilde değiştiren bir uygulamadır. Bir klasör içine aynı formatlarda (jpeg, png, gif) resimler yükleyip her birine sırasıyla 1,2,3,45,6… gibi numara ismi verip kaydettikten sonra jsMovie’yi çalıştıran Javascript kod içine resimlerin bulunduğu klasör, resim formatı, resim yüksekliği, resim genişliği gibi değerler ekledikten sonra jsMovie uygulaması bir  video player edasında ard arda bütün resimleri sırasıyla değiştirecektir.

Kaç tane resim eklemiş iseniz ona göre de ayrıca bir ayar vermeniz gerekiyor. Javascript kod içinde dikkat ederseniz from 1 (1’den) to 120 (120’ye kadar) gibi  bir kod göreceksiniz. Bu kodun anlamı ismi 1 olan resimden tekrar etmeye başlayıp ismi  120 olan resme kadar durmadan resimleri döndür demek oluyor. Durdurma, başa alma, tekrar etme ve oynatma butonları da ayrıca eksik edilmemiş jsMoviede. İlk bakışta görüntüsü bir video playerden farksızdır.

Daha önceleri resimleri ard arda tekrar edip çizgi film gibi gösteren bir de demosu vardı. Ama şuan kontrol ettiğimde sitenin kapandığını farkettim. Neyse ki jsMovie dökümanları için ayrı bir web sitesi bulunuyor ve aşağıdaki download butonunu kullanarak Github üzerinden jsMovie dosyalarını indirebilirsiniz. jsMovienin dökümanlarına buradan ulaşabilirsiniz. Bir de iyi haber var. Dökümanları incelerken yeni bir sayfada örneğin demosunu da buldum. aşağıdaki demo butonundan inceleyebilirsiniz. jsMovieye eklenmiş yeni bir özellik de var. Slider sayesinde yükleme bandını ileri geri getirerek resimleri ileriye ve geriye sarabilirsiniz. Bu özelliği kullanarak 360 derece ürün inceleme sayfaları da yapabilmeniz mümkün. Zaten demo sayfasında 360 derece dönen bir resim (toplam 30 resmin tekrar ediyor) görüntüsü var.

Kullanım

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

Js dosya adresleri : 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src='jquery.jsmovie.min.js'></script>

 JavaScript : 

<script>
$(document).ready(function(){

    $('#movie').jsMovie({
        sequence: 'animation####.jpg',
        from: 1,
        to: 120,
        folder : "ani/",
        height:200,
        width:300,
        loader: {path:"img/preloader.png",height:50,width:50,rows:2,columns:4},        
    });

    $('#play').click(function(){
        $('#movie').jsMovie('play');
    });

    $('#stop').click(function(){
        $('#movie').jsMovie('stop');
    });

    $('#pause').click(function(){
        $('#movie').jsMovie('pause');
    });

});
</script>

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

Html : 

<div id='movie'></div>
<div id='play'>play</div>
<div id='stop'>stop</div>
<div id='pause'>pause</div>