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.