Fullscreen Photo Gallery / Carousel with jQuery

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