carousel slideshow mibreit - Free Download Simple Carousel/Slideshow Plugin - jQuery mibreitGallery

Free Download Simple Carousel/Slideshow Plugin – jQuery mibreitGallery

Posted on

This time I will share jQuery Plugin and tutorial about Simple Carousel/Slideshow Plugin – jQuery mibreitGallery, hope it will help you in programming stack.

carousel slideshow mibreit - Free Download Simple Carousel/Slideshow Plugin - jQuery mibreitGallery
File Size: 130 KB
Views Total: 1199
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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"
04          data-src="1.jpg"
05          data-title="Image 1"
06          alt="Image 2" />
07     <h3>Image 1</h3>
08   </div>
09   <div class="mibreit-imageElement" style="opacity:0">
10     <img src="image-placeholder-transparent.png"
11          data-src="2.jpg"
12          data-title="Image 2"
13          alt="Image 2" />
14     <h3>Image 2</h3>
15   </div>
16   <div class="mibreit-imageElement" style="opacity:0">
17     <img src="image-placeholder-transparent.png"
18          data-src="3.jpg"
19          data-title="Image 3"
20          alt="Image 3" />
21     <h3>Image 3</h3>
22   </div>
23 </div>

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" />
04   </div>
05   <div class="mibreit-thumbElement">
06     <img src="image-placeholder-transparent.png" data-src="thumb-2.jpg" width="100" height="80" alt="thumbnail" />
07   </div>
08   <div class="mibreit-thumbElement">
09     <img src="image-placeholder-transparent.png" data-src="thumb-3.jpg" width="100" height="80" alt="thumbnail" />
10   </div>
11 </div>

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({
02  
03   // slideshow container
04   slideshowContainer: "#full-gallery",
05  
06   // thumb view container
07   thumbviewContainer: ".mibreit-thumbview",
08  
09   // image title container
10   titleContainer: "#full-gallery-title",
11  
12   // determine whether to enable fullscreen mode
13   allowFullscreen: !0,
14  
15   // image preloader
16   preloadLeftNr: 2,
17   preloadRightNr: 3,
18  
19   // SCALE_MODE_STRETCH, SCALE_MODE_FITASPECT (defualt), SCALE_MODE_NONE, SCALE_MODE_EXPAND
20   scaleMode: SCALE_MODE_FITASPECT
21  
22 })