jMotion – jQuery Gif Oluşturma Eklentisi

 

Ayman Teryaki tarafından geliştirilen jMotion eklentisi  resimlerinizi  sırasıyla değiştirerek gif  benzeri  görüntüler  elde etmenizi sağlıyor. Photoshop yada  diğer programlarda  bütün resimleri ard  arda  ekleyip  gif  formatında kaydettikten sonra  ortaya hareketli bir  resim çıkıyordu. Bu   jQuery eklentisinde  ise  websayfası  üzerinde  resim klasörünü, resim  uzantısını ve tekrar  edilecek resim sayısını da girdikten sonra eklenti  klasör içinden resimleri  bulup teker teker  sıralandırıyor. Yanlız buradaki önemli  husus resimlerinizi  rakamlarla isimlendirin. Örneğin birden yirmiye kadar  resim eklediniz  ve resim isimleri 1.jpg, 2.jpg, ……….. 20.jpg  gibi adlandırdınız bu  resimleri  amount=”20″ kısmında belirttiğiniz  sayıya  göre  eklenti  sırasıyla  resimleri tekrar edecektir.

 Kullanım

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

jQuery ve jMotion eklentisinin url adresleri :

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

Html :

Buraya  kadarki  kısmı pek  açıklayıcı  olmadı sanırım.  Kullanımı diğer  eklentilerden farklı olduğu  için biraz daha açıklık getirelim

Öncelikle örnek bir  çerçeve oluşturalım örnek çerçevemizin içinde  eklentinin resimleri hareket  ettirebilmesi  için  class  ismi jMotion olması gerekiyor.

<div class=”jmotion”  bu kısma  anlatacağımız  değerler gelecek > </div>

• Resimlerimizi  eklenti-resimleri  adında  bir klasörde barındırdık diyelim.  Resimlerimizi  eklentinin bulabilmesi  için folder”eklenti-resimleri”  ekledikten sonra  jMotion eklentisi  resimlerimizin hangi klasörde olduğunu  bilecek ve o klasördeki resimleri kullanıcak.
• Oluşturduğumuz klasöre eklediğimiz  resimlerin formatını seçmek  için type=”jpg”  ekliyoruz. Eğer png  yada  başka formatlarda resim  kullanıyorsanız jpg  yerine  kullandığınız resim formatını girmeniz gerekiyor. Eklenti  belirlediğiniz  formattaki resimleri  çekecektir.
• 104 tane  resim sıraladınız mesela ve resimlerin ismi 1,2,3,……. 104 şeklinde  belirlediniz. Eklentinin 1′den 124′e kadarki bütün resimleri sıralamas ıiçin sayacı amount=”104″ şeklinde  girmeniz gerekiyor.  Eğer daha az  bir rakam  kullanırsanız örneğin 70 rakamını kullanırsanız  70′ten sonraki resimleri  eklenti  görmeyecektir.
• Aynı klasör  içine  birden fazla  demo için örnek  resim eklerseniz  resimlerin karışmasını engellemek için  resimlere ön ek ekleyebilirsiniz. Mesea  1.jpg diye adlandıracağınıza mintik_1.jpg diye adlandırabilirsiniz. Eklentininde  bunu ayırt edebilmesi  için.  pref=”mintik_”  eklemeniz gerekiyor. Bu şekilde  mintik_ ismi ile başlayan bütün resimleri  eklenti  bulabilecektir.
• Resimler  arası geçiş hızı için speed=”2000”  veya daha hızlı  olmasını istiyorsanız speed=”100” yada daha aşağı bir numara  bellirleyebilirsiniz. Numaralar küçüldükçe  resimler  arası  değişim hızlanacaktır.
• Fade efekti için fade=”700“
• diğer  efektler  içinde  effect=”efektadı” kullanmanız  gerekiyor. Kullanabileceğiniz  efektler ;  reverse, revind, top,  left, center, bigger, turn-h ve turn-v. Örnek kullanım : efect=”turn-v”
• Eğer isterseniz çerçeve boyunuda kendiniz belirleyebiliyorsunuz. Çerçeve  boyuna  göre  resimde otomatik olarak büyüyor.  Genişlik ayarı için width=”500″ yükseklik ayarı  için width=”500” şeklinde kullanabilirsiniz.

Birleştirilmiş hali şuşekilde olacaktır :

Birleştirdiğimiz bu  kodlar sayesinde ortaya aşağıdaki  gibi  bir görüntü çıkacaktır.  Toplamda 25 farklı  karenin tekrar  etmesi  ile  oluşan bir çizgi  film sahnesi.

Bu  eklentiyi  kullanarak ayrıca  resim galerisi  de oluşturabilmeniz  mümkün. Tek yapmanız gereken speed zamanını biraz  arttırmak :)