Simple Carousel/Slideshow Plugin - jQuery mibreitGallery

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.

<link rel="stylesheet" href="/path/to/mibreitGallery.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<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.

<div id="full-gallery">
  <div class="mibreit-imageElement" style="opacity:0">
    <img src="image-placeholder-transparent.png" 
         data-src="1.jpg" 
         data-title="Image 1" 
         alt="Image 2" />
    <h3>Image 1</h3>
  </div>
  <div class="mibreit-imageElement" style="opacity:0">
    <img src="image-placeholder-transparent.png" 
         data-src="2.jpg" 
         data-title="Image 2" 
         alt="Image 2" />
    <h3>Image 2</h3>
  </div>
  <div class="mibreit-imageElement" style="opacity:0">
    <img src="image-placeholder-transparent.png" 
         data-src="3.jpg" 
         data-title="Image 3" 
         alt="Image 3" />
    <h3>Image 3</h3>
  </div>
</div>

3. Add small images to the thumbnail view. OPTIONAL.

<div class="mibreit-thumbview">
  <div class="mibreit-thumbElement">
    <img src="thumb-1.jpg" width="100" height="80" alt="thumbnail" /> 
  </div>
  <div class="mibreit-thumbElement">
    <img src="image-placeholder-transparent.png" data-src="thumb-2.jpg" width="100" height="80" alt="thumbnail" /> 
  </div>
  <div class="mibreit-thumbElement">
    <img src="image-placeholder-transparent.png" data-src="thumb-3.jpg" width="100" height="80" alt="thumbnail" /> 
  </div>
</div>

4. Create a container to hold the image title. OPTIONAL.

<h3 id="full-gallery-title" class="mibreit-slideshow-title"></h3>

5. Initialize the plugin to render a gallery on the page. Done.

mibreitGallery.createGallery({

  // slideshow container
  slideshowContainer: "#full-gallery",

  // thumb view container
  thumbviewContainer: ".mibreit-thumbview",

  // image title container
  titleContainer: "#full-gallery-title",

  // determine whether to enable fullscreen mode
  allowFullscreen: !0,

  // image preloader
  preloadLeftNr: 2,
  preloadRightNr: 3,

  // SCALE_MODE_STRETCH, SCALE_MODE_FITASPECT (defualt), SCALE_MODE_NONE, SCALE_MODE_EXPAND
  scaleMode: SCALE_MODE_FITASPECT

})

---

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