Skip to content

Instantly share code, notes, and snippets.

@shohagbhuiyan

shohagbhuiyan/readme.txt

Last active Jul 12, 2018
Embed
What would you like to do?
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