Polaroid Like Photo Gallery/Lightbox Plugin - jQuery Galleroid

The jQuery Galleroid plugin lets you create a responsive, polaroid-style photo gallery where the users are able to preview images in a lightbox popup with the ability to scroll through all images.

How to use it:

1. Add the following JavaScript and CSS files to your HTML file.

<link rel="stylesheet" href="galleroid.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="galleroid.js"></script>

2. Create a container element in which the photo gallery will generate.

<div id="galleroid">
</div>

3. Create a new HTML file named 'galleroid.html' and insert images and descriptions to the file following the html structure as these:

<!-- items are wrapped in a container so that they do not disrupt the flexbox layout when they become active -->
<div class="galleroid-item-wrapper">
  <!-- an item represents one project -->
  <div class="galleroid-item">
    <div class="galleroid-picture-container">
      <!-- only one of these images will be shown at one time -->
      <!-- foreground images -->
      <img src="1.jpg" class="galleroid-picture active" width="100" height="100">
      <img src="2.jpg" class="galleroid-picture hidden-right" width="100" height="100">
      <img src="3.jpg" class="galleroid-picture hidden-right" width="100" height="100">
      <img src="4.jpg" class="galleroid-picture hidden-right" width="100" height="100">
    </div>
    <button class="galleroid-previous-button">&lt</button>
    <p class="galleroid-title">
        Title bigger title title test
    </p>
    <button class="galleroid-next-button">&gt</button>
    <div class="galleroid-text-container">
      <!-- only one of these paragraphs will be shown at one time alongside its accompanying picture -->
      <!-- pictures and text must match up in number and order -->
      <p class="galleroid-text active">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
      <p class="galleroid-text hidden-right">
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p>
      <p class="galleroid-text hidden-right">
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </p>
      <p class="galleroid-text hidden-right">
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>
</div>

... More Items Here ...

---

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