Customize web viewer in a such a way that we can navigate from one page to another page.

[Anish Jain]

Hi,
    We want to customize web viewer in a such a way that we can navigate from one page to another page by using arrow button.

    For that we may come across some challenges, following are given below.

    1. We need event where swapping of page is done, so that we can customize it.

    2. How we can set arrow button in web viewer.(In which container of html or better approach to do that)

    3. How we can adjust zoom in functionality along with navigation arrow button so that user will only allow to navigate form one page to another page when page is zoomed out (in original size).
        We want to hide next and previous arrow when is page is zoomed out. how can we achieve this?.

    Please refer functionality in attached image.

    We need this for both desktop and mobile devices.

Thanks,
Anish Jain
.Net Developer
      

[Matt Parizeau]

Hi Anish,

If you trigger the 'swiperight' or 'swipeleft' events that will go to the next page in either direction.

Here is some sample code to show how this could be done.  This code could be put in a config file.

$(document).on('documentLoaded', function() {
    var forwardArrow = $('<div>')
        .css({
            position: 'absolute',
            left: myArrowPosition.x,
            top: myArrowPosition.y
        })
        .addClass('arrow');

    // change pages when tapping on the arrow
    forwardArrow.on('tap', function() {
        $('#viewer').trigger('swipeleft');
    });

    $(document.body).append(forwardArrow);

    // hide the arrows if the page is zoomed in
    $(document).on('touchend', function() {
        if (readerControl.isZoomedIn()) {
            $('.arrow').hide();
        } else {
            $('.arrow').show();
        }
    });
});

Matt Parizeau

Software Developer

PDFTron Systems Inc.