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');
    }
  }

}












Comments

Popular posts from this blog

Pagination of multiple recent post blog

Service Filter

When You Want to open popup(first time load)