Javascript Flipbook

**fileserverdirect** · 10-31-2010, 01:15 AM

Hello all,
I have an interesting request from a client, A flipbook made out of javascript. The client sent me about 100 images, all frames from a flipbook, they would like to have them "animate" at about like 3 or 4 frames a second. My idea was to take a slide show script and time it down to like 300 milliseconds. I don't know a lot of javascript and don't worry, I've googled this for awhile and I can't find a solution. Is it better just to make a movie in Windows Movie Maker, or is this possible in JavaScript? My only concern is that the user would literally have to wait for all of the images to load. Can anyone point me in the right direction?

**Nile** · 10-31-2010, 01:28 AM

Well, first I would make an array in java script of all those images with PHP using glob. The javascript shouldnt be so hard. Make a for, then inside make a setTimeout go to the next array.

**jscheuer1** · 10-31-2010, 06:19 AM

http://www.burmees.nl/menu/bookextended.html

**Nile** · 10-31-2010, 03:36 PM

@jscheuer1: I thought he ment that kind of flip book too - but then I thought it couldnt be because he said he searched google and the first results on google are flipbooks like that. I'm pretty sure he wants a flipbook like when you take Post-its and draw little stick figures over 1 millimeter on ever post it, then when you flip through it it looks like hes walking.

**vwphillips** · 10-31-2010, 04:12 PM

http://www.vicsjavascripts.org.uk/Ph...otoBookIII.htm

**Nile** · 10-31-2010, 04:21 PM

Again, I'm pretty sure thats not what he is asking for.

**fileserverdirect** · 10-31-2010, 04:31 PM

ugh, Nile is the only one who gets it. So anyways, I have an array set up with all the files in it. I am also using jquery, which may be helpful. Now I don't know javascript very well, so I'm going out on a limb here; I would know how to do this in php, but not in javascript\jquery. Structurally it would be like:

Code:

var imgs = new array("photo01.jpg","photo02.jpg","photo03.jpg");

for(i=0; i<imgs.length; i++) {
$("#flipbook").delay(500).src(imgs[i]);
}

#flipbook is <img id="flipbook" src="" />

**Nile** · 10-31-2010, 04:48 PM

Yeah, give it a try.
Remember its new Array()

**fileserverdirect** · 10-31-2010, 05:12 PM

Well, i did some googling and I came up with two solutions, but nether work:

Code:

html>
<head>
<title>flipbook</title>
<SCRIPT type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></SCRIPT>

</head>
<body>
<img id="flipbook" src="" />
<script type="text/javascript">
$(document).ready(function(){
imgs = new Array("photo01.jpg","photo02.jpg","photo04.jpg");
$.each(imgs, function(key, img) {
	//$.delay(1000, function(){$("#flipbook").attr({src: img}); });
$("#flipbook").animate({"margin-top":"0px"},"1000",function(){$("#flipbook").attr({src: img}); });
});
});
</script>
</body>
</html>

I commented out the first one, the second one does not work either.Any help?

**Nile** · 10-31-2010, 06:05 PM

Hmm this is weird, I tried:

Code:

<html>
<head>
<title>flipbook</title>
<SCRIPT type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></SCRIPT>

</head>
<body>
<img id="flipbook" src="" />
<script type="text/javascript">
$(document).ready(function(){
var imgs = new Array("images/image1.jpg","images/image2.jpg","images/image3.jpg", "images/image4.jpg", "images/image5.jpg", "images/image6.jpg", "images/image7.jpg", "images/image8.jpg", "images/image9.jpg");
$.each(imgs, function(key, img) {
	setTimeout(function() { $("#flipbook").attr('src', imgs[key]) }, 1500);
});
});
</script>
</body>
</html>

But it just skips to image6 and stops... hmm

Thread: Javascript Flipbook

Thread Tools

Search Thread

Javascript Flipbook

Bookmarks

Bookmarks

Posting Permissions