Powerful Photo Gallery/Viewer Plugin - jQuery Dark Slideshow

A tiny yet powerful jQuery plugin to create a feature-rich photo gallery & image viewer for the web.

Features:

• Switches between images with navigation arrows.
• Cross-fading transitions.
• Automatically fade between images at a certain speed.
• Thumbnail carousel.
• Fullscreen mode. Allows you to display the full version of an image in a fullscreen lightbox.
• Image counter and description.

How to use it:

1. Add the image counter, gallery controls, image captions, and thumbnail images to the gallery as follows:

<div id="gallery">

  <div id="slide">
    <div class="counter"></div>
    <a class="prev">❮</a>
    <a class="next">❯</a>
    <img class="toggleDiapo" src="icons/pause_diapo.png" width="40" />
    <img class="fullscreen" src="icons/fullscreen.png" width="30" />
    <img id='preview' />
  </div>

  <div class="caption-container">
    <p id="caption"></p>
  </div>

  <div id="thumbnails">
    <div class="wrapper">
      <img src="1.jpg" class="thumbnail" alt="Alt For Caption">
      <img src="2.jpg" class="thumbnail" alt="Alt For Caption">
      <img src="3.jpg" class="thumbnail" alt="Alt For Caption">
      <img src="4.jpg" class="thumbnail" alt="Alt For Caption">
      <img src="5.jpg" class="thumbnail" alt="Alt For Caption">
      ...
    </div>
  </div>
  
</div>

2. Create the HTML for the fullscreen image lightbox.

<div class="fullscreen-container hidden">
  <div class='fullscreen-div'>
    <img class="remove-fullscreen" src="icons/remove_icon.webp" width="60" />
  </div>
</div>

3. Load jQuery library and the plugin's files in the document. That's it.

<script src="jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="js/slider.js"></script>

---

This awesome jQuery plugin is developed by 0x13A0F. For more Advanced Usages, please check the demo page or visit the official website.