Polaroid Like Photo Gallery/Lightbox Plugin - jQuery Galleroid
File Size: | 7.8 KB |
---|---|
Views Total: | 2510 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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"><</button> <p class="galleroid-title"> Title bigger title title test </p> <button class="galleroid-next-button">></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.