Fullscreen Background Slideshow with Audio
File Size: | 2.54 MB |
---|---|
Views Total: | 4398 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

An awesome jQuery Slidshow Plugin that allows you to create a Fullscreen Background Slideshow with HTML5 Audio element in order to give life to the gallery.
Usage:
1. Add necessary elements in th head section
<link rel="stylesheet" type="text/css" href="js/vegas/jquery.vegas.css"> <link rel="stylesheet" type="text/css" href="js/jscrollpane/jquery.jscrollpane.css"> <link rel="stylesheet" type="text/css" href="css/styles.css"> <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script src="js/jquery.easing.js"></script> <script src="js/vegas/jquery.vegas.js"></script> <script src="js/jscrollpane/jquery.jscrollpane.min.js"></script> <script src="js/buzz/buzz.js"></script><script src="js/gallery.js"></script>
2. The Markup
<div id="flash"></div> <!--contain the picture title and credits--> <div id="title"> <h1>New York Gallery</h1> <p>Picture by <a href="http://www.flickr.com/photos/48904316@N04/">Alessandro Artini</a></p> </div> <div id="thumbnails"> <ul> <li><a href="img/01.jpg"><img src="img/01b.jpg" title="New York moving" data-valign="top"></a></li> <li><a href="img/02.jpg"><img src="img/02b.jpg" title="New York traffic" data-valign="bottom"></a></li> <li><a href="img/03.jpg"><img src="img/03b.jpg" title="Street dancers"></a></li> <li><a href="img/04.jpg"><img src="img/04b.jpg" title="Lights"></a></li> <li><a href="img/05.jpg"><img src="img/05b.jpg" title="NBC Studio"></a></li> <li><a href="img/06.jpg"><img src="img/06b.jpg" title="New York by night" data-valign="top"></a></li> <li><a href="img/07.jpg"><img src="img/07b.jpg" title="Empire State Building"></a></li> <li><a href="img/08.jpg"><img src="img/08b.jpg" title="New York Promenade" data-valign="top"></a></li> <li><a href="img/09.jpg"><img src="img/09b.jpg" title="Ellis Island Flag" data-valign="top"></a></li> <li><a href="img/10.jpg"><img src="img/10b.jpg" title="Central Park"></a></li> <li><a href="img/11.jpg"><img src="img/11b.jpg" title="Statue of Liberty" data-valign="top"></a></li> <li><a href="img/12.jpg"><img src="img/12b.jpg" title="Shoes"></a></li> </ul> <div id="pointer"></div> </div> <div id="pause"><a href="#">Paused</a></div> <div id="volume" class="all"><a href="#">Sounds</a></div>
This awesome jQuery plugin is developed by codrops. For more Advanced Usages, please check the demo page or visit the official website.