Fullscreen Photo Gallery / Carousel with jQuery
| File Size: | 17 KB |
|---|---|
| Views Total: | 3898 |
| 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.










