Simple Fashion jQuery Image Slider Plugin

A minimalist jQuery plugin for creating a fashion image slider/slideshow/carousel with arrows navigation and pagination support.

How to use it:

1. Include the necessary javascript and CSS files in the html document.

<link rel="stylesheet" type="text/css" href="css/jquery-imagegallery.css" />
<link rel="stylesheet" type="text/css" href="css/lookbook.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery-imagegallery-v0.1.js"></script>

2. Create the Html for an image carousel.

<div id="demo" class="lookbook">
<div class="lookbook-slide"> <img src="img/image1.jpg" />
</div>
<div class="lookbook-slide"> <img src="img/image2.jpg" />
</div>
<div class="lookbook-slide"> <img src="img/image3.jpg" />
</div>
<div class="lookbook-slide"> <img src="img/image4.jpg" />
</div>
</div>

3. Initialize the plugin with one JS call.

<script>
$(document).ready(function(){
$("#demo").lookbooky();
});
</script>

4. Available options with default values.

<script>
$(document).ready(function(){
$("#demo").lookbooky({
//lookbook name will be used by Analyzer ( Coremetrics )
lookbookName: 'lookbook-name',
//define image for left Arrow
arrowLeftImage: 'img/arrow-left.png',
//define image for right Arrow
arrowRightImage: 'img/arrow-right.png',
//jquery selector for slides
slidesSelector: '.lookbook-slide',
//jquery selector for links. ( We use it to call analyzer ( Coremetrics ) if they have data-coremetrics-onclick or data-coremetrics-onhover attribute)
linksSelector: '.lookbook-links',
//jquery selector for pagination number image
paginatonNumberSelector: '.lookbook-pagination-img',
//jquery selector from pagination marker image
paginationMarkerSelector: '.lookbook-pagination-marker',
//jquery selector for area on map into pagination div
paginationLinksSelector: '.lookbook-pagination map area',
//prefix to be added when user clicks on page number
paginationAnalizerPrefix: 'topnav-',
//slide animation timeout
slideAnimationTimeout: 500,
//container/slide width
slideContainerWidth: 961,
//container/slide height
slideContainerHeight: 638,
//push state values for slides. {0:'slide-pushstate-name', 1: 'slide-pushstate-name'}. Must be used with lookbookName + lookbookSeparator + pushstate value.
pushState: {},
//push state separator between lookbook name and pushstate value
pushStateSeparator: '-',
//interface for any analyzer based on coremetrics code. Can be customized must contain createPageElementTag and createPageviewTag
analyzer: {
createPageElementTag: function(cmCatId, cmCategory, attributes){
console.log('COREMETRICS: createPageElementTag',cmCatId, cmCategory, attributes);
},
createPageviewTag: function(cmPageID, cmCategoryID, searchTerm, searchResults){
console.log('COREMETRICS: createPageviewTag',cmPageID, cmCategoryID, searchTerm, searchResults);
}
}});
});
</script>

---

This awesome jQuery plugin is developed by xilenomg. For more Advanced Usages, please check the demo page or visit the official website.