Ayman Teryaki tarafından geliştirilen jMotion  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 uygulamasında  ise  websayfası  üzerinde  resim klasörünü, resim  uzantısını ve tekrar  edilecek resim sayısını da girdikten sonra jMotiın  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  jMotion sırasıyla  resimleri tekrar edecektir.

 Kullanım

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

Js adresleri :

<script language="javascript" src="jquery-1.7.2.min.js"></script>
<script language="javascript" src="jmotion.js"></script>
<script language="javascript" src="jmotion-ex.js"></script>

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

Html :

<div class="jmotion" folder="fighter" type="gif" amount="124"  speed="200" fade="0" width="500", height="500"></div>

Buraya  kadarki  kısmı pek  açıklayıcı  olmadı sanırım.  Kullanımı diğer örneklerden 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.  jMotion’un resimlerimizi bulabilmesi  için folder”eklenti-resimleri”  ekledikten sonra  jMotion   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. Uygulamamız bu şekilde  belirlediğiniz  formattaki resimleri  çekecektir.
• 104 tane  resim sıraladınız mesela ve resimlerin ismi 1,2,3,……. 104 şeklinde  belirlediniz. 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  jMotion 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. Uygulamanın  bunu ayırt edebilmesi  için  pref=”mintik_”  eklemeniz gerekiyor. Bu şekilde  mintik_ ismi ile başlayan bütün resimleri  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 :

<div class="jmotion" folder="fighter" type="gif" amount="25"  speed="200" fade="0" width="500", height="500"></div>

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.