Simple jQuery Photo Gallery with Expanding Preview - sampGallery

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" 
     <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:


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

  • Publication date: 21.03.2018
  • Source