Tiny Responsive Photo Carousel Plugin with jQuery - PhotoGallery 2

PhotoGallery 2 is a lightweight, customizable jQuery photo gallery plugin to present your images in a responsive, automatic carousel slider UI.

Features:

• Auto stretch / shrink / crop / resize images to fit container.
• Supports two background size properties: size-cover and size-contain.
• Auto slide between images on page load.
• Lots of API functions.
• Image caption bar.

Basic usage:

1. Include the required stylesheet photogallery.css in the head section and the script photogallery.js in the footer, after jQuery library.

<link href="photogallery.css" rel="stylesheet">
  ...
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="photogallery.js"></script>

2. Insert a set of images into a container element. Use the data-caption attribute to specify the captions text.

<div id="gallery-demo">
  <img src="1.jpg" data-caption="Caption 1">
  <img src="2.jpg" data-caption="Caption 2">
  <img src="3.jpg" data-caption="Caption 3">
  ...
</div>

3. Initialize the plugin.

$("#gallery-demo").PhotoGallery();

4. Configuration options.

// The index slide that the photo gallery will start on.
startingSlide: 0,

// Cover: Scale the background image to be as large as possible so that the background area is completely covered by the background image.
// Contain: Scale the image to the largest size such that both its width and its height can fit inside the content area.
backgroundSize: "cover",

// animation speed
animationSpeed: 200,

// autoplay
autoScroll: true,

// autoplay interval
scrollDelay: 6000

5. Methods.

// initialize the plugin
$("#gallery-demo").PhotoGallery();

// go to next slide
$("#gallery-demo").PhotoGallery(next);

// go back to previous slide
$("#gallery-demo").PhotoGallery(prev);

// go to a specified slide
$("#gallery-demo").PhotoGallery(ID);

---

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