私が作成した列のセット間のページングを作成したい

Question

// UPDATE //

私は私がcolumnizerプラグイン（ニュースレターのサンプル10）で動作するように変更したページングを行うにはいくつかのコードを見つけましたjQuery。唯一の問題は、記事の次の部分に行くことができることです（1つの部品に3列に分割されています）。何らかの理由で私は記事の前の部分に戻ることはできません。 ".articleprevbutton"をクリックすると次の部分に移動します。ページングのコードはここから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

[OK]私は最終的に私の質問のコードの一部とここからの残りの部分を使用して作業しました：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 + ""); 
}); 

あなたが自動複数の列にあなたの記事やコンテンツを取得するために、より多くの情報が必要とcolumnizerで作業を助けている場合は、ちょうどcolumnizerをGoogleで検索ページや部分に分割しました。私はこれが本当にウェブサイトにもっとマガジンを感じたい人に役立つことを願っています。無限にページの下に落ちるのではなく、ページに分割できるという利点があります。ありがとう。