Change your website in panoramic view. By clicking and dragging you can navigate to other pages on your website. Click and drag to the left or to the right to navigate to pages on the same level. Click and drag up and down to navigate to other levels that are parent or child pages of the page you curently on.
Page: Github pages
Download the files from the dist folder in this repository and them to your project folder.
The following step you need to repeat on each page you want to use Panor on.
Inside the page's <head></head> tags include the panor CSS file.
<!-- Panor css file -->
<link rel="stylesheet" type="text/css" href="panor.min.css">Before the </body> closing tag put the following JS files.
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Panor js file -->
<script src="panor.min.js"></script>Create the <div class="panor"> element between the <body></body> tags of your page. Inside this element you can put your page content.
<div class="panor">
<!--
Page content goes here.
-->
</div>Call the .panor() on the <div class="panor"> element. Make this call inside a $(document).ready() fucntion.
$(document).ready(function() {
$('.panor').panor({
'http://yourwebsite.com/index.html': {},
'http://yourwebsite.com/page.html': {}
});
});The first parameter of the function is an object that defines the pages you want to scroll through. The key is the URL of the page. The value is an object for child pages underneath that page. An empty object means that the page doesn't have any child pages. You also can assign child pages to child pages and etc. For example you have an overview page with coworkers and each coworker has also it's own page. The page structure would look something like this:
{
'http://yourwebsite.com/coworkers': {
'http://yourwebsite.com/coworkers/johndoe' : {},
'http://yourwebsite.com/coworkers/janedoe' : {},
},
}The second parameter is an object for the options. For now there is only one option. An example for the options object looks something like this:
{
showMenu: true
}Shows a menu of the pages on the right side of the screen.
default: false
options: boolean (true / false)
- Better mobile support
- Add more options for more customization