Minimal Responsive Gallery With Thumbnail Nav - jQuery Gallery.js

File Size: 231 KB
Views Total: 19877
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal Responsive Gallery With Thumbnail Nav - jQuery Gallery.js

A super tiny jQuery plugin for creating a minimal responsive gallery/slider where you can specify how many items to show for different screen sizes. Click on the thumbnail navigation or nav arrows to switch between the images you specify.

How to use it:

1. Include the stylesheet 'gallery.css' on the webpage that will provide the core styles for the gallery.

<link rel="stylesheet" href="gallery.css">

2. Include jQuery library and the JavaScript file 'gallery.js' at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src='gallery.js'></script>

3. Embed your images into a DIV container like this:

<div class="container-gallery">
  <img src="https://unsplash.it/1920/1200?image=494" alt="">
  <img src="https://unsplash.it/1920/1200?image=483" alt="">
  <img src="https://unsplash.it/1920/1200?image=541" alt="">
  <img src="https://unsplash.it/1920/1200?image=563" alt="">
  <img src="https://unsplash.it/1920/1200?image=579" alt="">
  <img src="https://unsplash.it/1920/1200?image=577" alt="">
  <img src="https://unsplash.it/1920/1200?image=604" alt="">
  <img src="https://unsplash.it/1920/1200?image=611" alt="">
  <img src="https://unsplash.it/1920/1200?image=623" alt="">
  <img src="https://unsplash.it/1920/1200?image=628" alt="">
  <img src="https://unsplash.it/1920/1200?image=646" alt="">
  ...
</div>

4. Initialize the plugin and specify the image count, height, thumb height in the breakpoint objects as follows:

$('.container-gallery').gallery({
  height: 650,
  items: 6,
  480: {
    items: 2,
    height: 400,
    thmbHeight: 100
  },
  768: {
    
    items: 3,
    height: 500,
    thmbHeight: 120
  },
  600: {
    
    items: 4
  },
  992 : {
    
    items: 5,
    height: 350
  }
});

5. You're also allowed to customize the gallery controls in the JS as these:

$('.container-gallery').gallery({
  customControls: {
    prevButton: prevContent,
    nextButton: nextContent
  }
});

Change log:

2017-08-29

  • redesign+responsive

This awesome jQuery plugin is developed by totonaq. For more Advanced Usages, please check the demo page or visit the official website.