Immersive Zoom Timeline Responsive Slideshow
Version 1.1

A new full screen experience

V1.0.0
Work width jQuery-v1.7.0 or Later

About

Zoom In/Out Effect Sliders, Timeline effect with navigation. Fixed Dimensions, Full Width, Full Screen and Mini-Galleries. Please see the features and check the live preview of this slider and convince yourself of its quality.

Main Features

  • Responsive Slider
  • Full Screen Slider
  • Multiple Instances
  • Animation Play
  • Animation Reverse
  • Animate layers inside slides
  • Button links
  • Horizontal Scroll Timeline
  • Synced Slides
  • Reversed Slides
  • Mouse interaction
  • Delay
  • PNG and JPG ready
  • Start Automatically
  • Time between animation

Developer Features

Debug Mode

  • Callback Called after the images img tags are created (func: afterImagesSetting)
  • Callback Called after all DOM elements were created (func: afterDomCreated)
  • Callback Called after the CSS is defined (func: afterDefineCSS)
  • Callback Called after the first image is loaded (func: afterFirstLoad)
  • Callback Called after destination image is reached (the images in-between will not count) (func: afterTweenEnd)
  • Callback Called before the image's animation start (only the first, if there are several between this and the destination one) (func: beforeTweenStart)
  • Callback Called before an animation (func: beforeTransition)
  • Callback Called after an animation (when an image is at 100% width) (func: afterTransition)
  • Callback Called when the pause button is clicked (func: afterPauseClick)
  • Callback Called when the paly button is clicked (func: afterPlayClick)
  • Callback Called when the reverse button is clicked (func: afterReverseClick)

Usage

Code Example

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ZoomShowWidget</title> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/TweenMax.min.js"></script> <script src="js/TimelineMax.min.js"></script> <style type="text/css"> html, body{ margin:0; } </style> </head> <body> <div id="left" style="width:100%; height:100%; position: absolute; left:0;"></div> <!--<div id="right" style="width:50%; height:100%; position: absolute; right:0;"></div>--> <script type="text/javascript" src="js/ZoomShowWidget.js"></script> <script type="text/javascript"> window.onload=function(){ //widget initialization var widget = new ZoomShowWidget({ parent : '#left', paused : true, transitionTime : 1, imgsToLoad : 5, extraButtons : true, imgSize : '3000x2000', sync : 'normal', syncBtns : true, orientation : 'auto', debugMode : false }); } </script> </body> </html>

Demos

Simples Fullscreen

View Demo

Synced Timelines

View Demo

Animated layers

View Demo

Reversed Animation

View Demo