Fullscreen Background Slideshow with Audio

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/[email protected]/">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.