Simple Crossfading Slideshow / Gallery Plugin - vGallery.js

A simple, elegant, highly customizable jQuery image gallery / slideshow plugin for looping automatically through an array of images with a crossfade effect based on jQuery animate() function.

Features:

• Custom image captions.
• Allows to navigate between images via a thumbnail carousel.
• Right / left navigation arrows.
• Easy to style that fits your any need.

More examples:

• Basic Demo
• Fullscreen
• With thumbnails navigation

How to use it:

1. Build the html structure for the slideshow / gallery.

<!-- Gallery -->
<div id="gallery"></div>

<!-- Prev/Next navigation -->
<div id="prev"></div>
<div id="next"></div>

<!-- Image captions -->
<div id="text"></div>

2. Include jQuery library and the jQuery vGallery.js plugin at the bottom of the web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="src/vgallery.js"></script>

3. Create a new gallery instance with a few options.

var vg = new vGallery({
    gallery: '#gallery',
    images: [
      '1.jpg',
      '2.jpg',
      '3.jpg'
    ],
    next: {
      element: '#next',
    },
    prev: {
      element: '#prev',
    },
    counter: {
      element: '#counter',
    },
    loading: {
      image: 'images/loading.gif',
    },
    text: {
      element: '#text',
      items: [
        'Image Caption 1',
        'Image Caption 2',
        'Image Caption 3',
        'Image Caption 4'
      ],
    },
});

4. Add your own CSS styles to the slideshow / gallery.

#gallery {
  width: 1000px;
  height: 500px;
}

#prev, #next {
  width: 50px;
  height: 500px;
  position: absolute;
  top: 0;
  opacity: 0.7;
  z-index: 100;
}

#prev { left: 0; }

#next { right: 0; }

#text {
  height: 80px;
  width: 360px;
  padding: 15px 20px;
  position: absolute;
  bottom: 20px;
  left: 50px;
  z-index: 200;
  background: rgba(0,0,0,0.6);
  color: #FFF;
  font-size: 18px;
}

5. Active the slideshow / gallery.

vg.start();

6. Full configuration options.

var vg = new vGallery({

    // gallery selector
    gallery: '#gallery',

    // an array of images you wan to present
    images: [
      '1.jpg',
      '2.jpg',
      '3.jpg'
    ],

    // counter options
    counter: {
      element: null,
      separator: ' of ',
    },

    // loading indicator options
    loading: {
      image: null,
      all: true,
    },

    // next button options
    next: {
      element: null,
      text: '❯',
      image: null,
    },

    // previous button options
    prev: {
      element: null,
      text: '❮',
      image: null,
    },

    // replace previous button
    prev_image: null,

    // replace next button
    next_image: null

    // caption area selector
    text_element: '#text',

    // image captions
    text: {
      element: null,
      items: null,
    },

    // thumbnail options
    thumbnails: {
      element: null,
      images: null,
      captions: null,
      buttons: true,
      button_color: '#000',
      active_color: '#000',
    },
    
    // navigation indicator options
    indicators: {
      element: null,
      color: '#999',
      acolor: '#FFF',
      round: false,
      opacity: 1,
      image: null,
      aimage: null,
    },
    
    // links for images
    links: [],

    // auto play
    auto: true,

    // pause on hover
    pause: true,

    // transition delay
    delay: 5000,

    // animation speed
    fade: 1000,

    // background color
    bg_color: '#fff',

    // What images should use background-size:contain vs background-size:cover. 
    // 'none', 'all', 'portrait' or 'landscape'
    contain: none
    
});

Change log:

v0.3.0 (2015-10-24)

• Bug fix
• Added background demo

2015-10-23

• Adjust indicator size after window resize as well
• Add z-index to indicators and add indicator demo

2015-10-22

• Add indicator navigation

2015-10-21

• Improvement.
• Add pause when mouse hovers over gallery
• Don't show text until first image loads

2015-10-20

• Make it more responsive

---

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