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ı : 

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jPages.css">
<link rel="stylesheet" href="css/animate.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/tabifier.js"></script>
<script src="js/jPages.min.js"></script>

Javascript :

  <script>
  $(function() {
    $("div.holder").jPages({
      containerID: "itemContainer",
      previous : "?",
      next : "?",
      perPage:20,
      midRange: 3,
      direction: "random",
      animation: "flipInY",
    });
  });
  </script>

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

Html :

<div id="content" class="defaults">
      <div class="holder"></div>
      <ul id="itemContainer">
            <li><img src="img/img (1).jpg" alt="image"></li>
            <li><img src="img/img (2).jpg" alt="image"></li>
            <li><img src="img/img (3).jpg" alt="image"></li>
            <li><img src="img/img (4).jpg" alt="image"></li>
            <li><img src="img/img (5).jpg" alt="image"></li>
            <li><img src="img/img (6).jpg" alt="image"></li>
            <li><img src="img/img (7).jpg" alt="image"></li>
      </ul>
</div>
</div>

Ö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.