Polaroid Like Photo Gallery/Lightbox Plugin - jQuery Galleroid

File Size: 7.8 KB
Views Total: 2555
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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" 
<script src="galleroid.js"></script>

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

<div id="galleroid">

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">
    <button class="galleroid-previous-button">&lt</button>
    <p class="galleroid-title">
        Title bigger title title test
    <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 class="galleroid-text hidden-right">
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      <p class="galleroid-text hidden-right">
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      <p class="galleroid-text hidden-right">
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

... 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.