Je veux créer la pagination entre les séries de colonnes créées via le plug-in Columnizer jQuery

Question

// Mise à jour //

J'ai trouvé un code pour faire la pagination que j'ai modifié pour travailler avec le plugin Columnizer (bulletin d'information de l'échantillon 10) pour jQuery. Le seul problème est que je peux seulement aller à la partie suivante de l'article (il est divisé en 3 colonnes par partie). Pour une raison quelconque, je ne peux pas revenir à la partie précédente de l'article. Si je clique sur le ".articleprevbutton" il me suffit de passer à la partie suivante. Le code de pagination est d'ici http://pastebin.me/217b55dff89af94ad04de32328dca62a et est fait pour un carrousel d'image. Je n'ai pas besoin de revenir en arrière au début de la dernière partie de l'article quand je clique sur suivant. Je ne sais pas comment l'enlever sans la casser.

$(function(){ 
     var content_height = 466; 

     var page = 1; 

     function buildNewsletter(){ 
      if($('#theArticle').contents().length > 0){ 

       $page = $("#page_template").clone(true).addClass("page").css("display", "block"); 

       $page.find("#partnumbertext h3").append(page); 
       $("#singlepostbox").append($page); 
       page++; 

       $('#theArticle').columnize({ 
        columns: 3, 
        target: ".page:last .content", 
        overflow: { 
         height: content_height, 
         id: "#theArticle", 
         doneFunc: function(){ 
          buildNewsletter(); 
         } 
        } 
       }); 
      } 


      $('.page').hide(); 
      $('.page:first').show(); 


       $('.articleprevbutton, .articlenextbutton').click(function (ev) { 
       //prevent browser jumping to top 
       ev.preventDefault(); 

       //get current visible item 
       var $visibleItem = $('.page:visible'); 

       //get total item count 
       var total = $('.page').length; 

       //get index of current visible item 
       var page = $visibleItem.prevAll().length; 

       //if we click next increment current index, else decrease index 
       $(this).attr('href') === 'Next' ? page++ : page--; 

       //if we are now past the beginning or end show the last or first item 
       if (page === -1){ 
        page = total-1; 
       } 
       if (page === total){ 
        page = 0 
       } 

       //hide current item 
       $visibleItem.hide(); 

       //fade in the relevant item 
       $('.page:eq(' + page + ')').fadeIn(500); 

      }); 



     } 


     setTimeout(buildNewsletter); 
    }); 

Très un utilisateur amateur de jQuery ayant besoin d'aide. Tout serait génial. De plus, toutes les améliorations sont les bienvenues.

Answer 1

Ok, je l'ai finalement réussi en utilisant une partie du code de ma question et le reste d'ici: http://www.jsfiddle.net/brunolm/256mU/. La douleur est finie, si vous avez des conseils sur la façon de réduire ou d'améliorer le code, ils sont plus que bienvenus.

$(function(){ 


     // columnizer section creating all the pages of columns, I have 3 
     // columns per page, goto the link at the bottom to find out more about the 
     // columnizer newslettter code. 

var content_height = 466; 

function buildNewsletter(){ 
if($('#theArticle').contents().length > 0){ 

$page = $("#page_template").clone(true).addClass("page").css("display", "block"); 

$("#singlepostbox").append($page); 

$('#theArticle').columnize({ 
    columns: 3, 
    target: ".page:last .content", 
    overflow: { 
    height: content_height, 
    id: "#theArticle", 
    doneFunc: function(){ 
    buildNewsletter(); 
    } 
    } 
}); 
} 


     // Code for post nav info before click, total of pages reused on click. For example 1 of 3 
     var $pagination = $("#PostNav"); 
     var total = $('.page').length; 
     var current = $pagination.data("Current") ? $pagination.data("Current") : 1; 

     // Hides all pages except the very first page and shows the current page number + total number of pages 
     $('.page').hide(); 
     $('.page:first').show(); 
     $("#pagenumbertext").text("page " + (current) + " of " + total + ""); 

     } 

setTimeout(buildNewsletter); 

}); 


$("#PostNav a").click(function (e) { 
e.preventDefault(); 

var $this = $(this); 

var $pagination = $("#PostNav"); 

var $thepage = $(".page"); 

       // total number of pages 
var total = $('.page').length; 

      // Current page index  
var current = $pagination.data("Current") ? $pagination.data("Current") : 0; 

/* handling prev & next buttons */ 
if ($this.index() == 0) /* Previous */ 
{ 
    /* go 1 back or start at the end */ 
    current = ((current - 1) < 0 ? (total - 1) : (current - 1)); 
} 
else /* Next */ 
{ 
    /* go 1 forward or start at the beginning */ 
    current = ((current + 1) == total ? 0 : (current + 1)); 
} 

/* Save the current index for next time */ 
$pagination.data("Current", current); 

/* Transition to next or previous page and Update which page is visible*/ 
$thepage.css("display", "none").eq(current).css("display", "").fadeIn(500); 

$("#partnumbertext").text("part " + (current+1) + " of " + total + ""); 
}); 

Si vous avez besoin de plus d'informations et aider à travailler avec Columnizer pour obtenir vos articles et le contenu en colonnes automatiques multiples divisé en pages ou parties de recherche google juste pour Columnizer. J'espère que cela aidera tous ceux qui veulent vraiment donner à un site web une impression de magazine. Avec l'avantage supplémentaire d'être capable de le diviser en pages plutôt que de tout tomber sans fin sur la page. Merci.