Simple jQuery Photo Gallery with Expanding Preview - sampGallery
File Size: | 1.72 MB |
---|---|
Views Total: | 5840 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

sampGallery is a simple jQuery image gallery plugin that features a nice expanding preview effect when you click on a thumbnail, similar to the google image search.
See also:
- Google Image Search Style Photo Wall Gallery Plugin For jQuery - GI.TheWall.js
- Thumbnail Grid with Expanding Image Preview Using jQuery
- jQuery Plugin For Thumbnail Grid Expanding Preview - Gridder
- jQuery Plugin For Thumbnail Grid with Expanding Preview
How to use it:
1. Load the required sampgallery.css
in the header for basic gallery styles.
<link rel="stylesheet" href="sampgallery.css">
2. The html structure. Add your images with different resolutions into the gallery using data-attributes.
<div id="gallery" class="sampgallery"> <a href="full-size-1.jpg" target="_blank" data-fullsize="full-size-1.jpg" data-thumb="thumb-1.jpg"> <img src="medium-1.jpg"> </a> <a href="full-size-2.jpg" target="_blank" data-fullsize="full-size-2.jpg" data-thumb="thumb-2.jpg"> <img src="medium-3.jpg"> </a> <a href="full-size-3.jpg" target="_blank" data-fullsize="full-size-3.jpg" data-thumb="thumb-3.jpg"> <img src="medium-3.jpg"> </a> ... </div>
3. Load jQuery and the jQuery sampleGallery plugin before the closing body tag.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="sampgallery.js"></script>
4. Call the function on the gallery wrapper and done.
jQuery('#gallery').sampGallery();
5. Possible options.
jQuery('#gallery').sampGallery({ // Scroll page to preview scrolltoitem: true, // If needed to add offset // For example for fixed header and footer. // Works only when screen is larger than 767 pixels scrolloffset: {top:0, bottom:0}, // Animation speed animationspeed: 300, // Use thumbs as background-images thumbscaled: true, // Animate photos in // The element has to have class="sampgallery" added in markup showintro: false, // Callback function triggered after init afterinit: function(){ //console.log('Broom.'); } });
Changelog:
2018-11-11
- JS & CSS update
2018-06-02
- CSS fixed.
2018-03-26
- Added captions (Caption has to have .sampgallery-caption class).
2018-03-22
- Added min-width and min-height to sampgallery-thumb class
2018-03-21
- Updated for jQuery 3.
This awesome jQuery plugin is developed by TheSamp. For more Advanced Usages, please check the demo page or visit the official website.