🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Simple Photo Gallery is a lightweight jQuery & Bootstrap plugin for displaying a photo gallery in a responsive & fullscreen lightbox with arrows navigation support.

gallery-lightbox Bootstrap Responsive

Documentation

Simple Photo Gallery

This lightweight package of HTML, CSS and jQuery is a quick way to implement a simple, bare-bones photo gallery.

What does it do?

It makes a viewer out of your thumbnails and includes previous and next controls and a close button, as well as optional captions.

Usage

  1. Put your images inside a div with a class of "photo-thumbs".
    • You can have multiple galleries on a page.
    • There is an example in gallery.html that utilizes Bootstrap.
  2. Include the jQuery and gallery files.
    • jquery-2.0.3.min.js
    • gallery.js
    • gallery.css
    • boostrap.min.js (for tooltips)
    • boostrap.min.css (provides responsiveness and is optional)
  3. Done.

If you don't want to use the same large images for both the thumbnails and the single image view, add "-thumb" to your small image's filename, and put both images in the same directory.

  • Example: main image = "image.jpg", thumbnail image = "image-thumb.jpg". Use "image-thumb.jpg" on the page, and the script will use the large version ("image.jpg") in the image viewer.

For captions, add data-caption="Your caption" to your thumbnail image tags like this <img src="/path/to/image-thumb" data-caption="Image caption goes here." />.


You May Also Like