Dynamic Slideshow With Ken Burns Effect - Slideshowify

Slideshowify is a fancy slideshow jQuery plugin that uses hardware-accelerated CSS3 transforms to create a subtle Ken Burns Effect (panning and zooming effect) when transitioning between images.

See Also:

How to use it:

1. Load the necessary jQuery library and jQuery transit plugin (for smooth CSS3 transitions and transforms) in the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery.transit.min.js"></script>

2. Download and load the jquery.slideshowify.js after jQuery.

<script src="js/jquery.slideshowify.min.js"></script>

3. Create a container element to hold the slideshow.

<div id="demo">
</div>

4. Define your image data in a JSON file as follows.

// images.json
[
   {
      "src":"1.jpg",
      "w":"2000",
      "h":"1328"
   },
   {
      "src":"2.jpg",
      "w":"2000",
      "h":"1328"
   },
   {
      "src":"3.jpg",
      "w":"2000",
      "h":"1329"
   },
   // ...
]

5. Initialize the plugin on the target element and specify the path to the JSON file.

$.slideshowify({
  parentEl : '#demo',
  dataUrl  : "js/photos.json",
  // dataType: "jsonp",
});

6. You can also initialize the plugin on all images within the page to create a fullscreen slideshow.

<img src="1.jpg" alt="Image 1" />
<img src="2.jpg" alt="Image 2" />
<img src="3.jpg" alt="Image 3" />
...

$("img").slideshowify();

7. Config the Burns Effect effect.

$.slideshowify({
  parentEl : '#demo',
  dataUrl: "js/photos.json",
  fadeInSpeed: 1500,
  fadeOutSpeed: 1500,
  aniSpeedMin: 9000, 
  aniSpeedMax: 15000
});

8. Determine whether to randomize the images. Default: false.

$.slideshowify({
  parentEl : '#demo',
  dataUrl: "js/photos.json",
  randomize: true,
});

9. Functions.

$.slideshowify({
  parentEl : '#demo',
  dataUrl: "js/photos.json",
  filterFn: function(imgs){
    // filter data
    var fixedImgs = [];
    $.each(imgs, function(i, img){
      fixedImgs.push($.extend(img.versions["9"], {id:img.id}));
    });
    return fixedImgs;
  },
  afterFadeIn : function(curImage){
    // do something
  },
  beforeFadeOut : function(curImage){
    // do something else
  }
});

---

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