Create number pagination in custom module using jQuery
DEMO
===============================
https://info.boosterthon.com/design/design-archive/school-names-logos/
https://boosterspiritwear.com/design/design-archive/school-names-logos/
HTML
===============================
<div class="col-wrapper">
<div class="col-group"></div>
<div class="col-group"></div>
<div class="col-group"></div>
<div class="col-group"></div>
</div>
JS
===============================
//=== wrap in page section
var divs = $(".col-wrapper .col-group");
for(var i = 0; i < divs.length; i+=32) {
divs.slice(i, i+32).wrapAll("<div class='page'></div>");
}
$('.col-wrapper > .page').each(function(i){
i = i + 1;
$(this).addClass('page'+i)
});
//=== generate page count
var totalLength = $('.col-wrapper > .page').length;
var pages = totalLength;
if( pages > 1 ){
$('.col-wrapper').after('<div class="et_pb_gallery_pagination"><ul></ul></div>');
for(var i = 1; i <= pages; i++){
$('.et_pb_gallery_pagination > ul').append('<li><a href="javascript:void(0);">'+i+'</a></li>');
}
}
//=== generate next prev
$('.et_pb_gallery_pagination ul').prepend('<li><a href="javascript:void(0);">Prev</a></li>');
$('.et_pb_gallery_pagination ul').append('<li><a href="javascript:void(0);">Next</a></li>');
function NextPrevPagination(){
if( parseInt($('.et_pb_gallery_pagination ul li.active').text()) == 1 ){
$('.et_pb_gallery_pagination ul li:first-child').hide();
}else{
$('.et_pb_gallery_pagination ul li:first-child').show();
}
if( parseInt($('.et_pb_gallery_pagination ul li.active').text()) == pages ){
$('.et_pb_gallery_pagination ul li:last-child').hide();
}else{
$('.et_pb_gallery_pagination ul li:last-child').show();
}
}
//=== on page load
$('.col-wrapper > .page').hide().removeClass('active');
$('.col-wrapper > .page.page1').show().addClass('active');
$('.et_pb_gallery_pagination ul li').eq(1).addClass('active');
$('.et_pb_gallery_pagination ul li:first-child').hide();
showPagination();
//=== when click on page link
$('.et_pb_gallery_pagination ul li:not(:first-child):not(:last-child) a').click(function(){
$(this).parent().addClass('active').siblings().removeClass('active');
window.clickIndex = parseInt($(this).text());
$('.col-wrapper > .page').each(function(){
var eachIndex = $(this).index() + 1;
if( clickIndex == eachIndex ){
$(this).show().addClass('active').siblings().hide().removeClass('active');
}
});
$('body,html').animate({scrollTop:67},500);
NextPrevPagination();
showPagination();
});
//=== when click on next prev button
$('.et_pb_gallery_pagination ul li:last-child a').click(function(){
$('.et_pb_gallery_pagination ul li.active').removeClass('active').next('li:not(:last-child)').addClass('active');
$('.col-wrapper .page.active').hide().removeClass('active').next('.page').show().addClass('active');
$('body,html').animate({scrollTop:67},500);
NextPrevPagination();
showPagination();
});
$('.et_pb_gallery_pagination ul li:first-child a').click(function(){
$('.et_pb_gallery_pagination ul li.active').removeClass('active').prev('li:not(:first-child)').addClass('active');
$('.col-wrapper .page.active').hide().removeClass('active').prev('.page').show().addClass('active');
$('body,html').animate({scrollTop:67},500);
NextPrevPagination();
showPagination();
});
//=== show pagination area
function showPagination(){
var page_list = ['-2','-1','0','1','2'];
var offset = 0;
var total_page_count = $('.col-wrapper > .page').length;
var current_page_num = $('.col-wrapper > .page.active').index() + 1;
if( total_page_count - current_page_num == 1 ){
offset = -1;
}
else if( total_page_count - current_page_num == 0 ){
offset = -2;
}
else if( current_page_num == 2 ){
offset = 1;
}
else if( current_page_num == 1 ){
offset = 2;
}
else{
offset = 0;
}
//=== condition
$('.et_pb_gallery_pagination ul li').removeClass('show');
for( var i = 0; i <= page_list.length; i++){
var page = parseInt(page_list[i]);
var this_page = current_page_num + page + offset;
console.log(this_page);
if( this_page > 0 && this_page <= total_page_count ){
$('.et_pb_gallery_pagination ul li').eq(this_page).addClass('show');
}
}
}
===============================
https://info.boosterthon.com/design/design-archive/school-names-logos/
https://boosterspiritwear.com/design/design-archive/school-names-logos/
HTML
===============================
<div class="col-wrapper">
<div class="col-group"></div>
<div class="col-group"></div>
<div class="col-group"></div>
<div class="col-group"></div>
</div>
JS
===============================
//=== wrap in page section
var divs = $(".col-wrapper .col-group");
for(var i = 0; i < divs.length; i+=32) {
divs.slice(i, i+32).wrapAll("<div class='page'></div>");
}
$('.col-wrapper > .page').each(function(i){
i = i + 1;
$(this).addClass('page'+i)
});
//=== generate page count
var totalLength = $('.col-wrapper > .page').length;
var pages = totalLength;
if( pages > 1 ){
$('.col-wrapper').after('<div class="et_pb_gallery_pagination"><ul></ul></div>');
for(var i = 1; i <= pages; i++){
$('.et_pb_gallery_pagination > ul').append('<li><a href="javascript:void(0);">'+i+'</a></li>');
}
}
//=== generate next prev
$('.et_pb_gallery_pagination ul').prepend('<li><a href="javascript:void(0);">Prev</a></li>');
$('.et_pb_gallery_pagination ul').append('<li><a href="javascript:void(0);">Next</a></li>');
function NextPrevPagination(){
if( parseInt($('.et_pb_gallery_pagination ul li.active').text()) == 1 ){
$('.et_pb_gallery_pagination ul li:first-child').hide();
}else{
$('.et_pb_gallery_pagination ul li:first-child').show();
}
if( parseInt($('.et_pb_gallery_pagination ul li.active').text()) == pages ){
$('.et_pb_gallery_pagination ul li:last-child').hide();
}else{
$('.et_pb_gallery_pagination ul li:last-child').show();
}
}
//=== on page load
$('.col-wrapper > .page').hide().removeClass('active');
$('.col-wrapper > .page.page1').show().addClass('active');
$('.et_pb_gallery_pagination ul li').eq(1).addClass('active');
$('.et_pb_gallery_pagination ul li:first-child').hide();
showPagination();
//=== when click on page link
$('.et_pb_gallery_pagination ul li:not(:first-child):not(:last-child) a').click(function(){
$(this).parent().addClass('active').siblings().removeClass('active');
window.clickIndex = parseInt($(this).text());
$('.col-wrapper > .page').each(function(){
var eachIndex = $(this).index() + 1;
if( clickIndex == eachIndex ){
$(this).show().addClass('active').siblings().hide().removeClass('active');
}
});
$('body,html').animate({scrollTop:67},500);
NextPrevPagination();
showPagination();
});
//=== when click on next prev button
$('.et_pb_gallery_pagination ul li:last-child a').click(function(){
$('.et_pb_gallery_pagination ul li.active').removeClass('active').next('li:not(:last-child)').addClass('active');
$('.col-wrapper .page.active').hide().removeClass('active').next('.page').show().addClass('active');
$('body,html').animate({scrollTop:67},500);
NextPrevPagination();
showPagination();
});
$('.et_pb_gallery_pagination ul li:first-child a').click(function(){
$('.et_pb_gallery_pagination ul li.active').removeClass('active').prev('li:not(:first-child)').addClass('active');
$('.col-wrapper .page.active').hide().removeClass('active').prev('.page').show().addClass('active');
$('body,html').animate({scrollTop:67},500);
NextPrevPagination();
showPagination();
});
//=== show pagination area
function showPagination(){
var page_list = ['-2','-1','0','1','2'];
var offset = 0;
var total_page_count = $('.col-wrapper > .page').length;
var current_page_num = $('.col-wrapper > .page.active').index() + 1;
if( total_page_count - current_page_num == 1 ){
offset = -1;
}
else if( total_page_count - current_page_num == 0 ){
offset = -2;
}
else if( current_page_num == 2 ){
offset = 1;
}
else if( current_page_num == 1 ){
offset = 2;
}
else{
offset = 0;
}
//=== condition
$('.et_pb_gallery_pagination ul li').removeClass('show');
for( var i = 0; i <= page_list.length; i++){
var page = parseInt(page_list[i]);
var this_page = current_page_num + page + offset;
console.log(this_page);
if( this_page > 0 && this_page <= total_page_count ){
$('.et_pb_gallery_pagination ul li').eq(this_page).addClass('show');
}
}
}
Comments
Post a Comment