Я хочу создать пейджинг между наборами столбцов, созданными с помощью плагина jQuery Columnizer

Question

// ОБНОВЛЕНИЕ //

Я нашел некоторый код для подкачки страниц, который я изменил для работы с плагином колонизатора (образец бюллетеня 10) для jQuery.Единственная проблема в том, что я могу перейти только к следующей части статьи (она разделена на 3 столбца на каждую часть).Почему-то я не могу вернуться к предыдущей части статьи.Если я нажимаю кнопку «.articleprev», я просто перехожу к следующей части.Код для пейджинга отсюда http://pastebin.me/217b55dff89af94ad04de32328dca62a и сделан для карусели изображений.Мне не нужно возвращаться к началу последней части статьи, когда я нажимаю «Далее».Я просто не знаю, как вытащить его, не сломав.

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

Очень любитель jQuery, которому нужна помощь.Любое было бы здорово.Также приветствуются любые улучшения.

Answer 1

Хорошо, наконец-то я заработал, используя часть кода из моего вопроса, а остальные отсюда: http://www.jsfiddle.net/brunolm/256mU/. Боль прошла, если у вас есть какие-либо советы о том, как уменьшить или улучшить код, они большечем добро пожаловать.

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

Если вам нужна дополнительная информация и помощь в работе с колонизатором, чтобы ваши статьи и контент автоматически разбивались на несколько столбцов, разбитых на страницы или части, просто выполните поиск в Google для колонизатора.Я надеюсь, что это поможет любому, кто действительно хочет придать сайту больше ощущения от журнала.С дополнительным преимуществом была возможность разбить его на страницы, а не иметь все это бесконечно падая вниз страницы.Спасибо.