Tiny JSON Based Slideshow Plugin With jQuery - Photo Slideshow

Photo Slideshow is a lightweight, fast, cross-fading slideshow plugin that dynamically loads image information from a JSON file via AJAX requests. The plugin provides a preload function that loads images one at a time to decrease page load time by spacing out bandwidth use.

How to use it:

1. Create a container element for the photo slideshow.

<div id="slideShow"></div>

2. Download and then include the main JavaScript file slideshow.js after jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="slideshow.js"></script>

3. Add your images & OPTIONAL image notations in the JSON file as this:

// slideshow.json
[
  {
    "file": "001.jpg",
    "note": "Image notation is optional"
  },
  {
    "file": "002.jpg",
    "note": "Sequia Trees"
  },
  {
    "file": "003.jpg",
    "note": "Banana Slug"
  },
  {
    "file": "004.jpg"
  },
  {
    "file": "005.jpg",
    "note": "Starfish"
  }
]

4. The basic CSS styles for the slideshow.

#slideShow {
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%; /* 100% can be used for responsive layout */
}

#slideShow img {
  width: 100%; /* set width in #slideShow */
  height: auto;
  display: block; /* removes gap at bottom of image */
}

5. Style the caption bar of the slideshow.

#slideShow div {
  background-color: rgba(255, 255, 255, 0.75);
  position: relative;
  padding: 10px;
  bottom: 40px;
}

6. To config the slideshow, just override the default parameters at the beginning of the slideshow.js:

var sPos = 0; // slideshow array position
var sTime = 5000; // slide timer
var sDir = 'slides/'; // photo directory
var sTarget = '#slideShow'; // target element

---

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