Ich mag Paging zwischen Gruppen von Spalten über die jQuery-Plugin Columnizer erstellt erstellen

Question

// UPDATE //

fand ich einige Code-Paging zu tun, was ich mit dem Columnizer Plugin (Newsletter Probe 10) für jQuery Arbeit geändert haben. Das einzige Problem ist, ich nur auf den nächsten Teil des Artikels gehen kann (es ist aufgeteilt in drei Spalten pro Teil). Aus irgendeinem Grund kann ich nicht auf den vorherigen Teil des Artikels zurück. Wenn ich die „.articleprevbutton“ klicken dauert es nur mich auf den nächsten Teil. Der Code für das Paging ist von hier http://pastebin.me/217b55dff89af94ad04de32328dca62a und wird für ein Bild Karussell gemacht. Ich brauche es nicht zu Loopback-Runde zu Beginn im letzten Teil des Artikels, wenn ich die nächsten klicken. Ich weiß einfach nicht, wie man es herausnehmen, ohne sie zu brechen.

    $(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);
    });

Sehr viel ein Amateur jQuery Benutzer, die Hilfe braucht. Jeder wäre toll. Auch alle Verbesserungen sind willkommen.

Answer 1

Ok ich schließlich habe es funktioniert ein Teil des Codes aus meiner Frage verwenden und den Rest von hier: http : //www.jsfiddle.net/brunolm/256mU/ . Der Schmerz ist vorbei, wenn Sie irgendwelche Tipps haben, wie Sie den Code zu reduzieren oder zu verbessern, sie sind mehr als willkommen.

$(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 + "");
});

Wenn Sie weitere Informationen und Hilfe Arbeiten mit Columnizer müssen Ihre Artikel und Inhalte in automatische mehrere Spalten zu erhalten aufgeteilt in Seiten oder Teile suchen Sie einfach nach Columnizer googeln. Ich hoffe dass dies jemand hilft, die wirklich eine Website ein Magazin Gefühl geben will. Mit dem zusätzlichen Vorteil der Lage, es zu spalten in die Seiten, anstatt haben sie alle endlos die Seite nach unten fallen. Danke.