Link to a specific page using the Slider Page Format

Question

I answered this question over email and I'm posting it here so that everyone can see it.

The question is how to link to a specific page using the Slider Page Format.

Answer 1

Here's how you can jump to a specific page using the Slider. Attach the following code inside of a .js file using the Resources section of the in5 dialog:
sliderSettings = {hashTags:true};

That will add hash tags to the URL as the page changes. You can then link to specific pages using the hash tag, e.g. the following URL will link to page 2:
index.html#&panel1-2

Update: v3.6 will change the format of the hashtag in the URL to
#p=2

To match the other page formats.

---

Update: As of v3.3.6, enabling hashTags automatically connects to the browser navigation, so clicking the browser's back button will return you to the previous page.

To disable the browser navigation (i.e., treat the entire publication like a single page), the added JS should look like this:

sliderSettings = {hashTags:true, disableBrowserNav:true};

Comments

Hi
I need this and I'm trying it, but something doesn't work because the direction changes at every page as expected
http://www.grupoasis.com.es/desarrollo/medios/pages/ , but it I try to enter, for example, at http://www.grupoasis.com.es/desarrollo/medios/pages/#&panel1-5 , and the page is empty.

---

That's an issue when this hashtag setting is mixed with lazy load, but it's fixed in the latest version:
https://ajarproductions.com/pages/products/in5/download.php

---

Ok, thanks.
I will not use it for now, because the the new version I have error messages with the animations.

What's the use of the Lazy load images option?

---

Lazy Load Images will only load images on the current page and neighboring pages, rather than loading all of the images in the document right away. Turning this option on can dramatically reduce the load time in the browser, especially for long documents.

Source: https://ajarproductions.com/pages/products/in5/help.php#advanced-rendering

---

Hi Justin, is the first reference to sliderSettings = {hashTags:true}; still valid in the latest version of in5?

---

Yes, this hashTags setting still works in version 3.

---

Here's how to link to a specific page with other page formats as well:
https://ajarproductions.com/pages/products/in5/answers/4384/link-from-outside-to-a-specific-page-of-a-long-document

---

I would like to use the flipbook slider to increment the page numbers when changing pages. The solution given here with the hash tags works. However, the page numbers (#p=n) are not incremented. (v. 3.8.17) Is this correct, or is this a bug?

---

If you go to the Basic section of the Export HTML5 with in5 dialog, you'll see that the Flipbook is one type of Page Format, and the Slider--Slider (Vertical), Slider (Horizontal), and Slider (Fade In)--is another type of Page Format. Instead of applying the code to a Flipbook, try it with one of the Slider options.

---

I was able to reproduce the above solution with the slider (horizontal). Everything works as described and the page number is counted up and down when using the slider navigation.

Is there also a solution for Page Format "Flipbook with Page Peel" ?

---

You would have to attach an additional JS file that listens for the hashchange event and updates the hash based on the current page, e.g.,

$(window).on('hashchange', function(e){ 
    /*check to make sure that nav object is initialized first*/
    if(nav && nav.current > -1) location.hash = '#p=' + (nav.current);
    return false; /*you may or may not need this line to bypass the other event that changes the page when the hash changes*/
});

The above is just sample code to start with. I've not tested it.