Simple Fashion jQuery Image Slider Plugin
File Size: | 2.82 MB |
---|---|
Views Total: | 4342 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.