Play image sequence
//HTML | |
/*===================== | |
<div class="root"> | |
<div class="imageplayer"> | |
</div> | |
</div> | |
=======================*/ | |
//******************************************************************// | |
//Usage ************************************************************ | |
//******************************************************************// | |
$(document).ready(function() { | |
"use strict"; | |
mgSeq_LoadImg("http://www.abc.com/xx_"); //Image sequence naming: xx_1, xx_2, xx_3 etc | |
imgSeq("root"); // run this function to play forward | |
// imgSeqReverse("root"); // run this function to play backward | |
}); |
// Loading sequence of image | |
function imgSeq_LoadImg(imageUrl) { | |
var i, x; | |
for (i = 0; i <25; i++) { | |
x = imageUrl+i+".png" | |
$(".imageplayer").append('<img src=" '+x+' " />'); | |
} | |
$(".imageplayer > :not(img:nth-child(1))").hide(); | |
} | |
// function for play forward | |
function imgSeq(x) { | |
var time = 0; | |
$(" ."+x+" .imageplayer img").each(function(index, element) { | |
if (index == 0){ | |
}else{ | |
setTimeout(function() { | |
$(" ."+x+" .imageplayer img:nth-child(" + index + ")").show(); | |
$(" ."+x+" .imageplayer :not(img:nth-child(" + index + "))").hide(); | |
}, time); | |
time += 50; //change this if more delay needed | |
} | |
}); | |
} | |
// function for play backward | |
function imgSeqReverse(x) { | |
var time = 0; | |
$(" ."+x+" .imageplayer img").each(function(index, element) { | |
var $thisElm = $(" ."+x+" .imageplayer img"); | |
if (index == 0){ | |
}else{ | |
setTimeout(function() { | |
var newIndex = $thisElm.length - index; | |
$(" ."+x+" .imageplayer img:nth-child(" + newIndex + ")").show(); | |
$(" ."+x+" .imageplayer :not(img:nth-child(" + newIndex + "))").hide(); | |
}, time); | |
time += 50; //change this if more delay needed | |
} | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment