This lightweight package of HTML, CSS and jQuery is a quick way to implement a simple, bare-bones photo gallery.
It makes a viewer out of your thumbnails and includes previous and next controls and a close button, as well as optional captions.
- 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.
- 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)
- 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." />.