Quero criar uma paginação entre conjuntos de colunas criadas através do plugin de colunas jQuery
-
26-09-2019 - |
Pergunta
//ATUALIZAR//
Encontrei algum código para fazer paginação que modifiquei para trabalhar com o plug -in do colunizer (amostra de boletim informativo 10) para o jQuery. O único problema é que eu só posso ir para a próxima parte do artigo (é dividido em 3 colunas por parte). Por alguma razão, não posso voltar para a parte anterior do artigo. Se eu clicar no ".ArticlePrevButton", isso me leva à próxima parte. O código para paginação é a partir daqui http://pastebin.me/217b55dff89af94ad04de32328dca62a e é feito para um carrossel de imagem. Não preciso que ele volte para o início na última parte do artigo, quando clico em seguida. Eu simplesmente não sei como eliminá -lo sem quebrar.
$(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);
});
Muito um usuário amador jQuery que precisa de ajuda. Qualquer um seria ótimo. Além disso, quaisquer melhorias são bem -vindas.
Solução
Ok, finalmente consegui funcionar usando parte do código da minha pergunta e o resto daqui: http://www.jsfiddle.net/brunolm/256mu/. A dor acabou, se você tiver alguma dica sobre como reduzir ou melhorar o código, elas são mais do que bem -vindas.
$(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 + "");
});
Se você precisar de mais informações e ajudar a trabalhar com o Colunizer para colocar seus artigos e conteúdo em várias colunas automáticas divididas em páginas ou peças, basta pesquisar no Google por colunizer. Espero que isso ajude qualquer pessoa que realmente queira dar a um site uma sensação de revista. Com o benefício adicional de poder dividi -lo nas páginas, em vez de ter tudo descendo sem parar na página. Obrigado.