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

Question

// Mise à jour //

J'ai trouvé un code pour faire la pagination que j'ai modifié pour travailler avec le plugin Columnizer (bulletin exemple 10) pour jQuery. Le seul problème est que je ne peux aller à la prochaine partie de l'article (C'est divisé en 3 colonnes par pièce). 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 prend à la partie suivante. Le code pour la pagination est d'ici http://pastebin.me/217b55dff89af94ad04de32328dca62a et est fait pour un carrousel d'images. Je ne suis pas besoin pour boucler dos rond au début à la dernière partie de l'article lorsque je clique sur suivant. Je ne sais pas comment le prendre sans le 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 bien un utilisateur jQuery amateur besoin d'aide. Tout serait génial. Aussi les améliorations sont les bienvenus.

Answer 1

Ok je l'ai finalement obtenu de travail en utilisant une partie du code de ma question et le reste d'ici: http : //www.jsfiddle.net/brunolm/256mU/ . La douleur est terminée, 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 d'aide travail 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 aide à tous ceux qui veulent vraiment donner un site Web une sensation plus magazine. Avec l'avantage supplémentaire de pu scinder en pages plutôt que de l'avoir sans cesse de tomber tout en bas de la page. Merci.