Fullscreen Photo Gallery / Carousel with jQuery
File Size: | 17 KB |
---|---|
Views Total: | 3790 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A simple, fullscreen, automatic, customizable photo gallery designed for showcasing your favorite photos to end users.
How to use it:
1. Include the required stylesheet and Font Awesome 4 (OPTIONAL) in the head section of the html document.
<link rel="stylesheet" href="font-awesome.min.css"> <link href="css/style.css" rel="stylesheet">
2. Add the first image together with the thumbnail navigation to your webpage like this:
<main> <img src="img/1.jpg"> </main> <footer class="control translucent"> <div class="wrap"> <div class="left"> <div class="leftmost"></div> <img src="img/left.png"> </div> <div class="slider"> <ul class="select"> <li><img src="img/1.jpg" alt=""/></li> <li><img src="img/2.jpg" alt=""/></li> <li><img src="img/3.jpg" alt=""/></li> <li><img src="img/4.jpg" alt=""/></li> <li><img src="img/5.jpg" alt=""/></li> <li><img src="img/6.jpg" alt=""/></li> <li><img src="img/7.jpg" alt=""/></li> <li><img src="img/8.jpg" alt=""/></li> <li><img src="img/9.jpg" alt=""/></li> <li><img src="img/10.jpg" alt=""/></li> <li><img src="img/11.jpg" alt=""/></li> <li><img src="img/12.jpg" alt=""/></li> <li><img src="img/13.jpg" alt=""/></li> <li><img src="img/14.jpg" alt=""/></li> <li><img src="img/15.jpg" alt=""/></li> </uL> </div> <div class="right"> <img src="img/right.png"> <div class="rightmost"></div> </div> </div> </footer>
3. Create a gallery control which allows you to pause the gallery and change the default parameters (theme and transition delay).
<header> <div class="media"> <img class="hide play" src="img/play.png"> <img class="display pause" src="img/pause.png"> </div> <div class="settings"> <i class="fa fa-cog"></i> </div> </header>
4. Include jQuery library and the main JavaScript file at the end of the document. That's it.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/script.js"></script>
This awesome jQuery plugin is developed by uttu357. For more Advanced Usages, please check the demo page or visit the official website.