Simple jQuery Photo Gallery with Expanding Preview - sampGallery

Simple jQuery Photo Gallery with Expanding Preview - sampGallery
File Size: 1.72 MB
Views Total:
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:

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" 
     <img src="medium-1.jpg">
  <a href="full-size-2.jpg" target="_blank" 
     <img src="medium-3.jpg">
  <a href="full-size-3.jpg" target="_blank" 
     <img src="medium-3.jpg">

3. Load jQuery and the jQuery sampleGallery plugin before the closing body tag.

<script src="//"></script>
<script src="sampgallery.js"></script>

4. Call the function on the gallery wrapper and done.


5. Possible options.


// 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(){


Change log:


  • CSS fixed.


  • Added captions (Caption has to have .sampgallery-caption class).


  • Added min-width and min-height to sampgallery-thumb class


  • 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.