This time I will share jQuery Plugin and tutorial about Simple Carousel/Slideshow Plugin – jQuery mibreitGallery, hope it will help you in programming stack.
mibreitGallery is a simple, responsive gallery/slideshow/carousel plugin that allows you to cycle through images by hitting images, thumbnails, or navigation arrows.
More Features:
- Thumbnail carousel view.
- Image preloader.
- Fullscreen mode.
How to use it:
1. Load jQuery library and the mibreitGallery jQuery plugin’s files in the HTML file.
1 |
< link rel = "stylesheet" href = "/path/to/mibreitGallery.css" /> |
2 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
3 |
< script src = "/path/tomibreit-gallery/mibreitGallery.min.js" ></ script > |
2. Insert images to the data-src
and then add them together with image titles and descriptions to the gallery.
01 |
< div id = "full-gallery" > |
02 |
< div class = "mibreit-imageElement" style = "opacity:0" > |
03 |
< img src = "image-placeholder-transparent.png" |
09 |
< div class = "mibreit-imageElement" style = "opacity:0" > |
10 |
< img src = "image-placeholder-transparent.png" |
16 |
< div class = "mibreit-imageElement" style = "opacity:0" > |
17 |
< img src = "image-placeholder-transparent.png" |
3. Add small images to the thumbnail view. OPTIONAL.
01 |
< div class = "mibreit-thumbview" > |
02 |
< div class = "mibreit-thumbElement" > |
03 |
< img src = "thumb-1.jpg" width = "100" height = "80" alt = "thumbnail" /> |
05 |
< div class = "mibreit-thumbElement" > |
06 |
< img src = "image-placeholder-transparent.png" data-src = "thumb-2.jpg" width = "100" height = "80" alt = "thumbnail" /> |
08 |
< div class = "mibreit-thumbElement" > |
09 |
< img src = "image-placeholder-transparent.png" data-src = "thumb-3.jpg" width = "100" height = "80" alt = "thumbnail" /> |
4. Create a container to hold the image title. OPTIONAL.
1 |
< h3 id = "full-gallery-title" class = "mibreit-slideshow-title" ></ h3 > |
5. Initialize the plugin to render a gallery on the page. Done.
01 |
mibreitGallery.createGallery({ |
04 |
slideshowContainer: "#full-gallery" , |
07 |
thumbviewContainer: ".mibreit-thumbview" , |
10 |
titleContainer: "#full-gallery-title" , |
20 |
scaleMode: SCALE_MODE_FITASPECT |