Fullscreen Photo Gallery / Carousel with jQuery

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

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:

  <img src="img/1.jpg"> 
<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>
    <div class="right"> <img src="img/right.png">
      <div class="rightmost"></div>

3. Create a gallery control which allows you to pause the gallery and change the default parameters (theme and transition delay).

  <div class="media">
    <img class="hide play" src="img/play.png"> 
    <img class="display pause" src="img/pause.png"> 
  <div class="settings">
    <i class="fa fa-cog"></i> 

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.