Simple Yet Customizable jQuery Slideshow Plugin - Uberbox
File Size: | 7.18KB |
---|---|
Views Total: | 667 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Uberbox is a lightweight yet feather rich jQuery plugin for easily and quickly creating a slideshow with transition animations and lots of configurable options.
Basic Usage:
1. Create a slideshow using ul
and li
elements.
<div id="slideshow"> <ul> <li data-thumb="thumb1.jpg"><img src="1.jpg" alt="" /></li> <li data-thumb="thumb2.jpg"><img src="1.jpg" alt="" /></li> <li data-thumb="thumb3.jpg"><img src="1.jpg" alt="" /></li> ... </ul> </div>
2. Include jQuery javascript library and jQuery uberbox plugin at the bottom of your page.
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="jquery.uberbox.js" type="text/javascript"></script>
3. Call the plugin with default options.
<script type="text/javascript"> $(document).ready(function() { $( "#slideshow" ).uberbox(); }); </script>
4. All the available options and methods.
<script type="text/javascript"> $(document).ready(function() { $( "#slideshow" ).uberbox({ width: 0, height: 0, startDelay: 0, startSlide: 0, // Start on a specific slide or pass "random" as a string for a random start slide order: "sequence", // or random speed: 5000, // How long a slide will display before transitioning, transition: { fx: "fade", speed: "slow" }, waitForTransition: false, // If a slide change is triggered during a transition use this to determine if uberbox should wait for the current transition to complete nextButton: "", // Give an element to use as a next button previousButton: "", // Give an element to use as a prev button playPauseButton: "", // Give an element to use as a play/pause button pager: "", // Give a list element to use as a pager thumber: "", // Give a list element to display thumbnails. You can specify thumbnails by adding data-thumb to each slide li auto: true, // auto start sliding on page load pauseOnHover: false, containerElement: "ul", slideElement: "li", pagerItemElement: "li", thumberItemElement: "li", source: { url: "" // Give uberbox a json url and it will fetch the slides dynamically }, touchTransitionDelta: 0.4, // percentage of total slide onTo: function( uberbox ) {}, onNext: function( uberbox ) {}, onPrevious: function( uberbox ) {}, onTransition: function( uberbox, activeSlide, nextSlide ) {}, onTransitionComplete: function( uberbox, activeSlide ) {}, onPlay: function( uberbox ) {}, onPause: function( uberbox ) {}, onSetup: function( uberbox ) {}, onInit: function( uberbox ) {}, onInitComplete: function( uberbox ) {}, onInitEvents: function( uberbox ) {}, onStartTimer: function( uberbox ) {}, onClearTimer: function( uberbox ) {}, onTouchStart: function( uberbox ) {}, onTouchMove: function( uberbox ) {}, onTouchEnd: function( uberbox ) {} }); }); </script>
This awesome jQuery plugin is developed by mattfroese. For more Advanced Usages, please check the demo page or visit the official website.