Slideshow of pages = link to previous and next page

[SehLax]

Note: this widget is outdated with the latest version of silex as of 2020-08-01, please ask in the issues to get new instructions

Hi, thanks for this awesome editor! It seems perfectly what I've been looking for, since I wanted a tool where people including myself can create page-based narrations with photos and text, freely positioned on a background that has the same size on all pages (a bit like creating a PDF presentation in Indesign). What I was missing for doing this, was a way to link to the next page without manually choosing it from the link pulldown menu, and I wrote the following snippet / workaround. Wanted to share it and hear if anyone has other options. I will write here if I add more features. Note that my Javascript skills are pretty outdated and I don't know how to write in the most performant way. And currently the function only works well if you tell her to go 1 page forwards or backwards, bigger jumps might not be safe.

in the js-header of the silex website:

function gotopage(diff){
    // variables for the whole function
    var newPage;
    var initialPage;

    //probably window.location.hash doesn't work in all environments?? also what about iframes?
    if (window.location.hash && window.location.hash.indexOf('#!') >= 0) {
        initialPage = window.location.hash.substr(2);
    } else {
        //use first page if now hash defined
        initialPage = $('a.page-element:first-of-type').attr('id');
    }

    //go through pages to see which one is active
     $('a.page-element').each(function( index ) {
              if ($( this ).attr('id') == initialPage) { //found active page
                   if ((index + diff) >= $('a.page-element').length) { //new page would be after the last > go to first
                      newPage = $('a.page-element:first-of-type').attr('id');
                  } else if ((index + diff) < 0) { //new page would be before the first > go to last
                      newPage = $('a.page-element').eq($('a.page-element').length - 1).attr('id');

                  } else { //go forward or backwards as requested
                    newPage = $('a.page-element').eq(index + diff).attr('id');
                  }
              } 
          }); 
    window.location.hash = '#!'+ newPage;
}

//keyboard binding
$(window).keydown(function( event ) {
  if ( event.which == 37 ) {
   gotopage(-1);
  } else if (event.which == 39) {
     gotopage(1); 
  }
});

in a HTML area that is shown on all pages:

<span onclick="gotopage(1);" style="cursor:pointer;">next</span>
 <span onclick="gotopage(-1);" style="cursor:pointer;">prev</span>

[SehLax]

PS: It does nothing on Safari on iPad, anybody know why?

[lexoyo]

This is great !! Love it ! I don't know why it does not work on ios, but maybe the window.location.hash is different...

[lexoyo]

do you have an example online?

[SehLax]

Thanks!

I also tried window.location (figured out that .hash is not needed to set the hash), but I think it doesn't arrive to that point. guess I'll do some debuggin with alerts ;-) or find out if there's a browser with console for iPad and let you know.

Also I want to add a slide animation to the pageable.js, to slide and fade out the old page's content to the left and fade in and slide in the next page's content from the right. or well maybe start with just fades. Or a page flipping animation.

If you want to include this in the future when it works better, I guess it would be nice to add "prev page" and "next page" to the Link dropdown-selector ?!

And no, currently I don't have any examples yet, apart from empty pages with 1 word on it. I'll post them here when ready!

[lexoyo]

ok great good idea to add next/prev page to the link drop-down thx