Quiero crear paginación entre conjuntos de columnas creadas a través del plugin de jQuery Columnizer

Question

// // ACTUALIZACIÓN

I encontró algo de código para hacer la paginación que he modificado para trabajar con el plugin Columnizer (muestra de noticias 10) para jQuery. El único problema es que sólo puedo ir a la siguiente parte del artículo (Está dividida en 3 columnas por cada parte). Por alguna razón que no puedo volver a la parte anterior del artículo. Si hago clic en el ".articleprevbutton" simplemente me lleva a la siguiente parte. El código para paginación es de aquí http://pastebin.me/217b55dff89af94ad04de32328dca62a y está hecho de un carrusel de imágenes. Yo no lo necesito a bucle ronda de vuelta al inicio de la última parte del artículo cuando haga clic en siguiente. Sólo que no sé cómo tomarlo a cabo sin que se rompa.

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

Mucho un usuario jQuery amateur en necesidad de ayuda. Cualquier sería grande. También las mejoras son bienvenidos.

Answer 1

Está bien que por fin tengo trabajo utilizando una parte del código de mi pregunta y el resto de aquí: http : //www.jsfiddle.net/brunolm/256mU/ . El dolor es más, si usted tiene algún consejo sobre cómo reducir o mejorar el código que son más que bienvenidos.

$(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 necesita más información y ayuda para trabajar con Columnizer para obtener sus artículos y el contenido en varias columnas automáticas dividido en páginas o partes sólo la búsqueda en Google de Columnizer. Espero que esto ayude a que realmente quiere dar a un sitio web de una manera más sensación revista. Con la ventaja añadida de podido dividirlo en las páginas en lugar de tenerlo todo sin parar de caer abajo de la página. Gracias.