Microfiche.js
With Associates
v1.8.3
A carousel library made With Associates focusing on performance, simplicity and touch.
Check out our project page on GitHub and the annotated source.
Installation
Microfiche requires jQuery ~> 1.7
You’ll want to include the following at the appropriate point in your page:
<script src="path/to/jquery.js"></script>
<script src="path/to/microfiche.js"></script>
Usage
Defaults
$('#default').microfiche();
Options
$('#cyclic').microfiche({ cyclic: true });
$('#buttons').microfiche({ buttons: false });
$('#bullets').microfiche({ bullets: false });
$('#keyboard').microfiche({ keyboard: true });
$('#click').microfiche({ clickToAdvance: true });
Commands
Commands are passed to the microfiche method as options, and may be passed at any point.
In this example, the slideByPages(1) command is performed immediately
after Microfiche has finished setting up.
$('#commands').microfiche({ slideByPages: 1 });
$('#commands').microfiche({ slideByPages: -1 })
$('#commands').microfiche({ slideByPages: 1 })
$('#commands').microfiche({ slideToPoint: 0 })
$('#commands').microfiche({ jumpToPoint: 0 })
$('#commands').microfiche({ jumpToPage: 2 })
Events
Microfiche emits the following events:
'microfiche:willMove''microfiche:didMove'
You can listen for them in the usual way:
$('#events').microfiche().on('microfiche:willMove microfiche:didMove', function(event) {
$('#events-console').html(event.type);
});
Event received: -
Talking to Microfiche Directly
Microfiche has some useful methods that return values, and so cannot
be used through the aforementioned jQuery style syntax. The microfiche
object itself is available via jQuery’ data method.
$('.my-element').data('microfiche');
Methods
var m = $('#methods').microfiche().data('microfiche');
m.currentPageIndex() // returns 0-index of the current page
m.totalPageCount() // returns the number of pages as an integer
m.min() // returns the minimum (left-most) position
m.max() // returns the maximum (right-most) position
Autoplay
To have Microfiche pause rotation when the user hovers over the
carousel, set autopause to true.
$('#autoplay').microfiche({
cyclic: true,
autoplay: 3,
autopause: true
});
Refresh
To refresh an existing Microfiche’s controls and content to adjust to a new container size,
call the refresh method.
$('#refresher').microfiche({ cyclic: true });
$('#refresher').css('width', '340px');
$('#refresher').microfiche({ refresh: true });
RefreshOnResize
To have Microfiche automatically refresh when a window resize event is fired, set a debounce rate in ms for refreshOnResize. A value of true indicates a 250ms debounce.
var r = $('#refreshonresize');
r.microfiche({ refreshOnResize: false }); // no refresh (default)
r.microfiche({ refreshOnResize: true }); // 250ms debounce
r.microfiche({ refreshOnResize: 0 }); // instant refresh
r.microfiche({ refreshOnResize: 100 }); // 100ms debounce
Resize your browser window until it's narrower than the example carousel below to see the carousel refresh.
$('#refreshonresize').microfiche({ refreshOnResize: true });