Izzi Image Sequence is the easiest way to use image sequence and to control it.
It includes images preload, action controls (play, pause, stop), autoplay, repeat, reverse options and callbacks.

1. Download the latest version of Izzi Image Sequence

2. Add Izzi Image Sequence's JS to your page :

    ....
    <script src="path_to_js/izziImageSequence.js" type="text/javascript"/>
    ....
        

3. Simply use an html image tag without src:

<img src="" alt="myImage" class="myClass" />

4. Initialize Izzi Image Sequence on document ready :

<script type="text/javascript">
    function init(){
        var sequence =   izziImageSequence({
            'element'       : ".myClass",
            "imgPath"       : "images/",
            'imgName'       : "imageName_",
            "nbrDecimal"    : 2,
            "imgType"       : "png",
            "numbreImg"     : 26
        });
    }

    function addListener(obj, eventName, listener) {
        if(obj.addEventListener) {
            obj.addEventListener(eventName, listener, false);
        } else {
            obj.attachEvent("on" + eventName, listener);
        }
    }

    addListener(window, "load", init);
</script>
        

Last update :
- How many time the animation will repeat can be set in the options : numbreRepeat
- Reverse the direction of the animation : sequence.functionReverseDirection()
- Set the direction of the animation : sequence.functionSetDirection(0)
- Callback when the current direction animation is over : sequence.functionisFinishDirection()

API

izziImageSequence(options)

• options - object , required . Izzi Image Sequence parameters, see bellow

var sequence =   izziImageSequence({
    'element'       : ".myClass",
    "imgPath"       : "images/",
    'imgName'       : "imageName_",
    "nbrDecimal"    : 2,
    "imgType"       : "png",
    "numbreImg"     : 26
});

Returns the object with couple of useful functions and methods:

• sequence.functionTriggerAnim() - run sequence
• sequence.functionPauseAnim() - pause sequence
• sequence.functionKillAnim() - stop sequence
• sequence.functionChangeRepeat(Boolean) - set repeat true/false
• sequence.functionChangeReverse(Boolean) - set reverse true/false
• sequence.functionReverseDirection() - change current direction
• sequence.functionSetDirection(0) - set current direction (0 = forward / 1 = backward)
• sequence.functionIsFinish() - return true if current direction animation is finished

Options

Izzi Image Sequence support the following list of parameters on initialization:

Parameter	Type	Default Value	Example	Description
element	HTML Element	-	".myClass"	Class or Id of the targeted html image
imgName	String	-	'myImageName_'	The pattern of the images name : myImageName_01.png
nbrDecimal	Number	-	3	The numbre of decimal of images's name pattern : myImageName_099.png
imgPath	String	-	'assets/images/'	The path of images's folder
imgType	String	-	'png'	The images's extension
numbreImg	Number	-	15	Numbre of image in the sequence
indexActif	Number	0	10	Index where sequence starts
delayInterval	Number	50	50	Delay in millisecond between each image of the sequence
repeat	Boolean	false	true	Repeat over and over the image sequence
reverse	Boolean	false	true	Play the sequence forward and backward
autoplay	Boolean	true	false	Autoplay sequence after loading
numbreRepeat	Number	null	2	How many time the animation will repeat
Callbacks
onComplete	Function	-	function(e){ do something }	Callback function, when sequence is fully over
onCompleteLoader	Function	-	function(e){ do something }	Callback function, when sequence is fully load
onCompleteBoucle	Function	-	function(e){ do something }	Callback function, when sequence loop is over
onUpdate	Function	-	function(e){ do something }	Callback function, when image change (e = indexImg)

Coming...

• Winter

contact : q.mangin@subskill.com