Adding pagination to the URL for jQuery BookBlock plugin

Question

I'm using the jQuery plugin called BookBlock which can be found in a Codrops demo here

I've successfully added pagination like the above example has and changed it to numbers instead of dots, however I am now wondering if it would be possible to add these same numbers to the URL?

For example www.site.com/page/4/ and if a user visits that URL they get automatically flipped to that page in the pagination sequence?

Here is my current code:

var Page = (function() {
                var $container = $( '#bb-custom-grid' ); // Defines the area
                return {
                    init : function() {
                    $container.find('div.bb-bookblock').each(function(){
                        var $bookBlock = $( this ),
                            
                       // BookBlock Settings

                            bbs = $bookBlock.bookblock( {
                                speed : 800,
                                perspective : 2000,
                                shadowSides : 0.8,
                                shadowFlip  : 0.4
                            }); 

                       // Next and Prev Arrows
                            var $navNexts = $bookBlock.find( '.prev-arrow' ),
                            $navPrevs = $bookBlock.find( '.next-arrow' ).hide();
                            $navNexts.on( 'click', function() {
                                bbs.next(); 
                                return false;
                            } );
                            $navPrevs.on( 'click', function() {
                                bbs.prev();
                                return false;
                            } );

                     // Pagination

                        $('ul.numbered-pagination .end.page').attr('data-page-id',bbs.$items.length);
                        $.each( bbs.$items, function( key, value ) {
                            var classes = 'page';
                            if(key==0){
                               classes = 'active page';
                               }
                            
                            $('<li class="'+classes+'" data-page-id="'+(key+1)+'">'+(key+1)+'</li>').insertBefore('ul.numbered-pagination .end.page');
                            $('ul.numbered-pagination li.page').on( 'click', function() {
                            
                            bbs.jump(parseInt($(this).attr('data-page-id')));
                            $('ul.numbered-pagination .page').removeClass('active');
                            $(this).addClass('active');
                        });

                        });
                        
                   // Swiping Action
                            $bookBlock.children().on( {
                            'swipeleft'     : function( event ) {
                                bbs.next();
                                return false;
                            },
                            'swiperight'    : function( event ) {
                                bbs.prev();
                                return false;
                            }
                        } );
                    
                    });
                        }
                };
                
            })();
                }

Any help would be greatly appreciated! Even if its just an explanation on why this may not be possible :) Thanks

score 0 · Answer 1 · answered Jun 03 '21 at 13:05

The configuration options allow for a startPage property so you could use that to start at the specified page.

How you ascertain the startPage value depends on how you set up the page - e.g. if it was your example URL, www.site.com/page/4/, you could do something like:

var startPage = parseInt(document.location.href.match(/[0-9]+/)[0]);

A less hacky way would be to use a query string: www.site.com/?page=4

var startPage = parseInt(new URL(document.location.href).searchParams.get("page"));

Adding pagination to the URL for jQuery BookBlock plugin

1 Answers1