Simple jQuery Sideshow/Gallery Plugin with Image Zoom Support
| File Size: | 18 KB |
|---|---|
| Views Total: | 2178 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.











