1. Features
This is a wrapper on top of Matteo Spinelli's SwipeView.
Designed to provide:
- jQuery interface on top of SwipeView
- An easily configurable gallery of HTML pages which are loaded using AJAX
- Wide borwser functionality and compatibility (IE8+,FF,Chrome etc...)
- Container element will be resized to match the height of the content
- API for customization
2. How To
2.1. Define a swipable view
Just use the .swipeview on the object you want ot be able to swipe (see sample 1 sources).
This means you just define an HTML:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="swipeview.css" rel="stylesheet" type="text/css" />
<script src ="swipeview.js" type="text/javascript" ></script>
<script src ="jswipeview.js" type="text/javascript" ></script>
<ul id="swipeview-nav"></ul>
<div id="swipeview"></div>
and use an activating script:
var slides = [
'p1.html',
'p2.html',
'p3.html',
'p4.html'
];
$('#sampleDIV').swipeview({
'slides': slides
});
2.2. Define a navigation bar or prev/next buttons
By default jSwipeView will create a navigation bar and prev/next by appending suffixes to the swipe DIV's ID:
- -nav: will be used to find and 'ul' element and create a navigation bar inside it. It will contain
- a "prev" button
- a direct jump pointer for each page
- a "next" button
- -nav-next: will be used to creare a next-page link, appropriate events will be automatically added to it
- -nav-prev: will be used to creare a next-page link, appropriate events will be automatically added to it
Example:
| swipe element | swipe element's ID | nav bar id | next element id |
| <div id='here'/> | here | here-nav | here-nev-next |
2.3. API
2.3.1. .next() and .prev()
var sample = $('#swipeDIV').swipeview({
'slides': slides
});
sample.next(); // animate slide to next element
sample.prev(); // animate slide to prev element
2.3.2. .goToPage(num)
var sample = $('#swipeDIV').swipeview({
'slides': slides
});
sample.goToPage(7); // jump directly to page 7
2.4. Events
2.4.1. swipeview-show
This is the event that you will most probably want to listen to, it will notify you of:
- address: of the page being loaded
- title: is specified in the list of pages
- index: the 0-based index of the slide currently being shown
$('#gallery').bind('swipeview-show', function( event, address, titolo, indice ) {
console.log('show! '+this+' for title:'+ titolo+' for address:' + address);
});
2.4.2. swipeview-load
This event can be used for fine-tuning purposes, once a page has been loaded in background (eg.: at the beginning or when cycling thru the pages) will raise an event with:
- address: of the page being loaded
- title: is specified in the list of pages
- index: the 0-based index of the slide currently being shown
$('#gallery').bind('swipeview-load', function( event, address, titolo, indice ) {
console.log('load! '+this+' for title:'+ titolo+' for address:' + address);
});
3. Samples
- 1 div for the swipe container ('#swipeview')
- 1 div to hold the navigation, which is autodetected using naming convention ('{main}-nav', so if '#swipeview-nav' is present it's used to hold the navigation)
- 1 javascript array for the list fo pages
- Slides have an URL + a title
- The window title is the same of the slide title
- Custom title object appears on top of the content
- Custom navigation controlled via naming convention ('{main}-nav-next' , so if '#swipeview-nav-next' is present it will navigate to next page)
- The swipe view generates events when the pages are loaded and when they are shown (which is different!)
- This sample listens to 'swipeview-show' event and changes the window URL using HTML 5 history API
- Custom prev/next objects are built using the jswipeview API