Simple jQuery Photo Gallery with Expanding Preview - sampGallery

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.