okie-show v1.0.2
Okie-Show
A slideshow Plugin. Contructor OkieShow(options) accepts an options object as an argument. It requires okie-helpers and okie-pub. It can optionally be used with okie-modal to load the slideshow in a modal.
Okie-show can link thumbnails on the page to the fullsize version that will be displayed in the slideshow. To use this functionality, add the boolean attribute data-thumb to the thumbnail image and add the url to the fullsize image to the data-fullsize attribute.
options
animationType - defaults to 'fade', currently fade is the only option
spinnerClass - className to add for the loading icon defaults to 'fa fa-spinner' (font-awesome spinner icon)
Example usage
This example uses the className 'image-reel-window' as the container for image thumbnails. Multiple '.image-reel-window' containers can exist on a single page.
var reel = [selector for thumbnail container]
// create on object to keep track of the container element and each image.
var reelObj = {
element: reel,
images: [].filter.call(reel.childNodes, function(node) {
return node instanceof Element;
})
};
// use okiePub to make our new object a publisher
okiePub.makePublisher(reelObj);
// on click event fire an 'imgClick' event via okiePub functionality
// the event will include the index of the of thumbnail that was clicked.
reel.addEventListener('click', function(event) {
reelObj.fire('imgClick', [].indexOf.call(reelObj.images, event.target));
});
// create the okieShow object and save it in our tracking object
reelObj.targetShow = new OkieShow();
// Clone the thumbnail into a new slide on the OkieShow instance.
reelObj.images.forEach(function(image) {
var slideContent = image.cloneNode(false);
reelObj.targetShow.addSlide(slideContent);
});
// the slideshow can be loaded in a modal
reelObj.modal = okieModal.newModal({
content: reelObj.targetShow
});
// add subscriptions to to the 'imgClick' event
// which is fired when a thumbnail is clicked.
// one subcription to navigate the slideshow to the correct image.
// and onother to open the modal.
reelObj.on('imgClick', reelObj.targetShow.toSlide, reelObj.targetShow);
reelObj.on('imgClick', reelObj.modal.show, reelObj.modal);