我想通过jQuery的Columnizer插件创建列集之间建立呼叫

Question

// // UPDATE

我发现一些代码来执行，我已经修改了与columnizer插件（通讯样品10）工作分页jQuery的。唯一的问题是我只能去文章的下一部分（它被分成每个部分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

好吧我最终得到了它的工作使用我的问题和其余从这里的其他代码：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。我希望这可以帮助任何真正想给网站带来更多杂志感觉的人。有了额外的好处，就可以将它分成页面，而不是无休止地在页面上翻阅。谢谢。