Simple jQuery Sideshow/Gallery Plugin with Image Zoom Support

File Size: 18 KB
Views Total: 2155
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple jQuery Sideshow/Gallery Plugin with Image Zoom Support

Simple Web Gallery is a jQuery image slideshow/carousel/gallery plugin that has support for showing images in a larger size as you hover over the 'zoom in' icon.

How to use it:

1. Include jQuery library and the jQuery simple web gallery plugin's JS & CSS files in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js"></script>
<script src="gallery/gallery.js"></script>
<link href="gallery/gallery.css" rel="stylesheet">

2. Create an empty container to place the slideshow/gallery.

<div id="contentDiv">
      
</div>

3. Replace the default images in the gallery.js.

// Array of obj with images and descriptions
var imagesList = [{
    path : '1.jpg',
    description : 'Desc 1'
    }, {
    path : '2.jpg',
    description : 'Desc 2'
    }, {
    path : '3.jpg',
    description : 'Desc 3'
    }, {
    path : '4.jpg',
    description : 'Desc 4'
    }, {
    path : '5.jpg',
    description : 'Desc 5'
    }, {
    path : '6.jpg',
    description : 'Desc 6'
    }, {
    path : '7.jpg',
    description : 'Desc 7'
    }, {
    path : '8.jpg',
    description : 'Desc 8'
    }, {
    path : '9.jpg',
    description : 'Desc 9'
    }, {
    path : '10.jpg',
    description : 'Desc 10'
    }
]; 

4. Config the slideshow/gallery.

// Selector: Div to which we add the gallery
var mainGalleryDiv = "#contentDiv"; 

// Boolean: show or hide image descriptions (true/false)
var showDescription = "false"; 

// Boolean: show or hide navigation arrows (true/false)
var showNavigation = "true"; 

// Boolean: show or hide lens (true/false)
var showLens = "true"; 

// Float: scale percent (1.1)
var scalePercent = 1.1; 

// Boolean: Slide image automatically, (true/false)
var scrollAuto = "false"; 

// Integer: Time between slide images (milliseconds)
var scrollAutoTimeout = 3000; 

// Integer: Default/First image (0)
var currentImage = 0; 

// Boolean: enable or disable mouse wheel scrolling of photos
var mouseWheelNavigation = "true"; 

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