jPages – Nesneleri sayfalama ve numaralandırma

0
432
Görüntülenme

jPages

Demo sayfasında yada örneğin açıklamak amacıyla eklemiş olduğumuz resme baktığınızda aklınıza ilk olarak bir resim galerisi örneği geliyor olabilir. Tabi resim galeri olarak ta kullanabilmeniz mümkün ama jPages uygulamasının asıl amacı çok fazla tekrar eden html etiketleri sayfalamaya ve numaralandırmaya yarıyor. Ayrıca bu sayfalar arası geçiş esnasında herhangi bir sayfa yenilenmesi olmuyor ve her sayfa geçişi esnasında html etiketleri içindeki elemanlar Y yada X (hangisini seçerseniz) pozisyonunda hafifçe sallanırlar.

Demodaki örneğimizde  id=”itemContainer” çerçevesi içinde sıralanmış olan ul li etiketleri içindeki resimler sıralanmış. Javascript kodlar içinde sayfa başına kaç tane içeriğin görüntülenebileceğini belirlemek ve animasyonu seçmek  size kalmış.  Çok uzun içeriklerinizi herhangi bir bilgi sahibi olmadan bile kolaylıkla jPages uygulamasını  kullanarak parçalara bölmeniz mümkün.

Kullanım

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

Js ve stil dosyaları : 

Javascript :

 

div.holder – Numaraların görüneceği div
containerID: “itemContainer” – İçeriklerin listeleneceği ID
previous : “?” – Önceki işareti
next : “?” – Sonraki işareti
perPage:20 – Sayfa başına görünecek içerik
midRange: 3 – Dönme oranı
direction: “random”
animation: “flipInY – Animasyonun yönü”
  • Body etiketleri arasına eklemeniz gereken bölüm.

Html :

Örnek olsun diye li etiketleri içine eklenmiş olan bir kaç tane resim ekledim. Siz bu etiketleri kendi içeriklerinize  göre çoğaltırsınız artık.

CEVAP VER

Lütfen yorumunuzu yazın.
Lütfen İsminizi bu alana yazın.