Simple jQuery Photo Gallery with Expanding Preview - sampGallery

File Size: 1.72 MB
Views Total: 5806
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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:

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

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.