JpgMovie Tutorial

This tutorial will lead you through the steps to add a "flexible jpgMovie player" to your site.

Introducing you to some of the optional features of jpgMovie players.

It will then go on to explain the subtle differences involved in using our other players.

And then outline some of the more advanced features available.

Download the jpgMovie files from our website and copy them to yours.

Get the files you need from our Download page and ftp them to your website.

Let's start with the absolute least amount of work to get a jpg movie onto your website

Add a line similar to the following code to the <HEAD> section of your page:

	<script type="text/javascript"
		src="http://www.jpgMovie.com/jslibs/1.1.3.3/jpgMovieFlexiblePlayer.js">
	</script>

Add the following HTML to your page wherever you want the movie player to appear:

	<DIV ID="jpgmovie"></DIV>

Then at the bottom of your page (right above the </HTML> tag) add the following code updating the 400, 300 to match the dimensions of the photos you are working with:

	<script type="text/javascript">
	mov = jpgMovieFactory( 'jpgmovie', 'jpgMovieFlexiblePlayer', 400, 300 );
	mov.draw();
	mov.addFrame( "http://www.jpgmovie.com/images/test/kayak_slideshow_demo/01.jpg" );
	mov.addFrame( "http://www.jpgmovie.com/images/test/kayak_slideshow_demo/02.jpg" );
	mov.addFrame( "http://www.jpgmovie.com/images/test/kayak_slideshow_demo/03.jpg" );
	</script>

Click Here to View a simple web page like this

That's all good and well, but we have a more recommended approach for your website

In reality your website will have more complicated/detailed pages than our earlier almost empty example page.

To ensure that your page is fully loaded and rendered before any of the jpgMovie code gets run it's better to use code more like the following.

Add lines similar to the following to the <HEAD> section of your page:

	<script type="text/javascript"
		src="http://www.jpgMovie.com/jslibs/1.1.3.3/jpgMovieFlexiblePlayer.js">
	</script>
	<script type="text/javascript">
	function loadJpgMovie() {
	  mov = jpgMovieFactory( 'jpgmovie', 'jpgMovieFlexiblePlayer', 400, 300 );
	  mov.draw();
	  mov.addFrame( "http://www.jpgmovie.com/images/test/kayak_slideshow_demo/01.jpg" );
	  mov.addFrame( "http://www.jpgmovie.com/images/test/kayak_slideshow_demo/02.jpg" );
	  mov.addFrame( "http://www.jpgmovie.com/images/test/kayak_slideshow_demo/03.jpg" );
	}
	</script>

Add the following HTML to your page wherever you want the movie player to appear:

	<DIV ID="jpgmovie"></DIV>

And, modify your current <BODY> tag so that it calls the loadJpgMovie() function you've entered into your HEAD section:

	<BODY onload="loadJpgMovie();">

Click Here to View an example page

Let's add in a shortcut because most of the time all of the jpg files used in a movie are located in the same folder

This step is optional.
But we use it most of the time.

Our earlier examples include the full URL to each image (e.g. http://www.jpgmovie.com/images/test/kayak_slideshow_demo/01.jpg).

There's nothing wrong with doing it that way, but if you have a lot of "frames" this approach can be a lot of typing and lead to some rather large web pages.

We can modify our loadJpgMovie() function to make this a lot less work.

	function loadJpgMovie() {
	  mov = jpgMovieFactory( 'jpgmovie', 'jpgMovieFlexiblePlayer', 400, 300 );
	  mov.setImageUrlBase( "http://www.jpgmovie.com/images/test/kayak_slideshow_demo/" );
	  mov.draw();
	  mov.addFrame( "01.jpg" );
	  mov.addFrame( "02.jpg" );
	  mov.addFrame( "03.jpg" );
	}

Click Here to View the setImageUrlBase example page

It's still a little bland, let's specify an image to show while the movie is loading

This step is optional.
But we recommend always using this technique.

The short movies in our examples load very quickly and you're not left staring at a blank screen for long, but the longer the movie the longer it takes to download/buffer and the time will come when you want to specify a photo/jpg/frame to display while the movie download is taking place.

Before you have drawn the movie player on the screen, you can add a line that specifies this photo/image.
If you want to rely on the Image Url Base, make sure you set the initial image AFTER you've set the Image Url Base.

	function loadJpgMovie() {
	  mov = jpgMovieFactory( 'jpgmovie', 'jpgMovieFlexiblePlayer', 400, 300 );
	  mov.setImageUrlBase( "http://www.jpgmovie.com/images/test/kayak_slideshow_demo/" );
	  mov.setInitialImage( "01.jpg" );
	  mov.draw();
	  mov.addFrame( "01.jpg" );
	  mov.addFrame( "02.jpg" );
	  mov.addFrame( "03.jpg" );
	}

Click Here to View the setInitialImage() example page

Let's get the movie to start playing automatically once it's finished loading

This step is optional.

Sometimes you might want the movie to start playing automatically and other times you wont.

The function that controls this is setAutoPlayOn().

	function loadJpgMovie() {
	  mov = jpgMovieFactory( 'jpgmovie', 'jpgMovieFlexiblePlayer', 400, 300 );
	  mov.setImageUrlBase( "http://www.jpgmovie.com/images/test/kayak_slideshow_demo/" );
	  mov.setInitialImage( "01.jpg" );
	  mov.setAutoPlayOn();
	  mov.draw();
	  mov.addFrame( "01.jpg" );
	  mov.addFrame( "02.jpg" );
	  mov.addFrame( "03.jpg" );
	}

Click Here to View the setAutoPlayOn() example page

Let's get the movie to automatically restart itself once it reaches the end

This step is optional.

Sometimes you want your movie to play once - other times you want it to repeat itself once it gets to the end.

The function that controls this is setLoopingOn().

	function loadJpgMovie() {
	  mov = jpgMovieFactory( 'jpgmovie', 'jpgMovieFlexiblePlayer', 400, 300 );
	  mov.setImageUrlBase( "http://www.jpgmovie.com/images/test/kayak_slideshow_demo/" );
	  mov.setInitialImage( "01.jpg" );
	  mov.setAutoPlayOn();
	  mov.setLoopingOn();
	  mov.draw();
	  mov.addFrame( "01.jpg" );
	  mov.addFrame( "02.jpg" );
	  mov.addFrame( "03.jpg" );
	}

Click Here to View the setLoopingOn() example page

Let's slow the movie down a little

This step is optional, but usually required to get you the exact movie you want.

The setInterval() function allows you to specify the time (in milliseconds) between each frame of the movie.

Milliseconds are thousandths of a second.
setInterval( 1000 ) would give you a 1 second gap between each frame/photo being shown.
setInterval( 5000 ) would give you a 5 second gap.
setInterval( 100 ) would give you a 1/10th of a second gap - or 10 frames per second.

	function loadJpgMovie() {
	  mov = jpgMovieFactory( 'jpgmovie', 'jpgMovieFlexiblePlayer', 400, 300 );
	  mov.setImageUrlBase( "http://www.jpgmovie.com/images/test/kayak_slideshow_demo/" );
	  mov.setInitialImage( "01.jpg" );
	  mov.setAutoPlayOn();
	  mov.setLoopingOn();
	  mov.setInterval( 1000 );
	  mov.draw();
	  mov.addFrame( "01.jpg" );
	  mov.addFrame( "02.jpg" );
	  mov.addFrame( "03.jpg" );
	}

Click Here to View the setInterval() example page

Adding a few more frames/photos will make it more interesting

Just keep adding mov.addFrame() lines until you have all of the frames added in the order you want them to play.
Your photos don't need to be named 01, 02, 03 etc.
They could be called bathroom.jpg, bedroom.jpg, kitchen.jpg etc.

The jpgMovie player will play them in the order you add them.

	function loadJpgMovie() {
	  mov = jpgMovieFactory( 'jpgmovie', 'jpgMovieFlexiblePlayer', 400, 300 );
	  mov.setImageUrlBase( "http://www.jpgmovie.com/images/test/kayak_slideshow_demo/" );
	  mov.setInitialImage( "01.jpg" );
	  mov.setAutoPlayOn();
	  mov.setLoopingOn();
	  mov.setInterval( 1000 );
	  mov.draw();
	  mov.addFrame( "01.jpg" );
	  mov.addFrame( "02.jpg" );
	  mov.addFrame( "03.jpg" );
	  mov.addFrame( "07.jpg" );
	  mov.addFrame( "06.jpg" );
	  mov.addFrame( "04.jpg" );
	  mov.addFrame( "05.jpg" );
	}

As explained earlier, there are sometimes some subtle differences between various movie players.

Using another player is very easy

Just tell the movie factory which player you want to use.

The only major difference is that some players are designed for a certain size photo, so you don't always have to specifiy the photo dimensions to the movie factory.
If you forget to remove the dimensions for players that don't need them when you call the movie factory, everything will still work, the redundant dimensions will simply be ignored.

	  mov = jpgMovieFactory( 'jpgmovie', 'jpgMovieFlexibleSliderPlayer', 400, 300 );

	  mov = jpgMovieFactory( 'jpgmovie', 'jpgMovieCircular400x300Player' );

	  mov = jpgMovieFactory( 'jpgmovie', 'jpgMovieNarrow267x200Player' );

and... the following just ignores the photo dimensions...

	  mov = jpgMovieFactory( 'jpgmovie', 'jpgMovieNarrow267x200Player', 400, 300 );

If you're using a player that starts off with AutoPlay ON or Looping ON and you want to turn it off.

We earlier used setAutoPlayOn() and setLoopingOn() to turn on those features, but if you're using a jpgMovie player that comes with those features turn on by default and you want to turn them off, we have functionality for that too.

You can use setAutoPlayOff() and/or setLoopingOff() in just the same way as you earlier turned them on.

	function loadJpgMovie() {
	  mov = jpgMovieFactory( 'jpgmovie', 'jpgMovieFlexiblePlayer', 400, 300 );
	  mov.setImageUrlBase( "http://www.jpgmovie.com/images/test/kayak_slideshow_demo/" );
	  mov.setInitialImage( "01.jpg" );
	  mov.setAutoPlayOff();
	  mov.setLoopingOff();
	  mov.draw();
	  mov.addFrame( "01.jpg" );
	  mov.addFrame( "02.jpg" );
	  mov.addFrame( "03.jpg" );
	  mov.addFrame( "07.jpg" );
	  mov.addFrame( "06.jpg" );
	  mov.addFrame( "04.jpg" );
	  mov.addFrame( "05.jpg" );
	}

There's also an available technique for programmers who need to set the features based on variables:

	function loadJpgMovie() {
	  mov = jpgMovieFactory( 'jpgmovie', 'jpgMovieFlexiblePlayer', 400, 300 );
	  mov.setImageUrlBase( "http://www.jpgmovie.com/images/test/kayak_slideshow_demo/" );
	  mov.setInitialImage( "01.jpg" );
	  mov.setAutoPlay( boolean_for_auto_play );
	  mov.setLooping( boolean_for_looping );
	  mov.draw();
	  mov.addFrame( "01.jpg" );
	  mov.addFrame( "02.jpg" );
	  mov.addFrame( "03.jpg" );
	  mov.addFrame( "07.jpg" );
	  mov.addFrame( "06.jpg" );
	  mov.addFrame( "04.jpg" );
	  mov.addFrame( "05.jpg" );
	}

The thumbnail player doesn't have play buttons

The thumbnail player is unlike most of the other players in that it doesn't have any buttons the person viewing the movie can control the movie with.

With the thumbnail player, the person viewing the photos controls the photos by cliking on a miniature version of the photo they want to look at next.

The thumbnail player will (by default) use thumbnails that are 1/4 the size of your photos.

You can overide this using setThumbnailWidth() and setThumbnailHeight()

	function loadJpgMovie() {
	  mov = jpgMovieFactory( 'jpgmovie', 'jpgMovieThumbnailPlayer', 400, 300 );
	  mov.setImageUrlBase( "http://www.jpgmovie.com/images/test/kayak_slideshow_demo/" );
	  mov.setInitialImage( "01.jpg" );
	  mov.setThumbnailWidth( 80 );
	  mov.setThumbnailHeight( 60 );
	  mov.draw();
	  mov.addFrame( "01.jpg" );
	  mov.addFrame( "02.jpg" );
	  mov.addFrame( "03.jpg" );
	  mov.addFrame( "07.jpg" );
	  mov.addFrame( "06.jpg" );
	  mov.addFrame( "04.jpg" );
	  mov.addFrame( "05.jpg" );
	}

The slideshow player merges photos rather than just replacing them

By default the slideshow player waits 5 seconds between frames.

You can set that interval to be anything you want.

So long as the interval rate remains 3 seconds or more the slideshow player will fade-out the previous photo and fade-in the replacement photo.

This fading takes almost a full second but provides a softer image update more appropriate for a slideshow.

And now, as promised an introduction to jpgMovie POWER features.

The most commonly used POWER feature is the one that lets you define your movie in an XML file rather than coding it into Javascript.

Just tell the movie factory which player you want to use.
And then where to download the XML from.

Setup the <HEAD> section:

	<script type="text/javascript"
		src="http://www.jpgMovie.com/jslibs/1.1.3.3/jpgMovieFlexiblePlayer.js">
	</script>
	<script type="text/javascript">
	function loadJpgMovie() {
	  mov = jpgMovieFactory( 'jpgmovie', 'jpgMovieFlexiblePlayer', 454, 300 );
	  mov.loadFromUrl( "http://www.jpgmovie.com/xml/1.1.3/jpgMovieSample.xml" );
	}
	</script>

You still need to place the target DIV where you want the movie to appear on your page:

	<DIV ID="jpgmovie"></DIV>

And, modify your current <BODY> tag so that it calls the loadJpgMovie() function in your HEAD section:

	<BODY onload="loadJpgMovie();">

Click Here to View the jpgMovie XML download example page

Our movie editor (that we can customize for you) creates XML files for you, but you can also code the XML files by hand by looking through our sample file and changing it to match the movie you want.
Our suite of webmaster tools for handling timelapse jpg movies can create also create these XML files.

Can I have the movie only load when the viewer asks it to by clicking a "Click to Play" or "Click to Load" button ?

Yes, just change the loadFromUrl() call to loadFromUrlOnDemand()
loadFromUrlOnDemand() also requires the URL of an image to show while waiting for the user to click the load/play button.

	  mov.loadFromUrl( "http://www.jpgmovie.com/images/test/kayak_slideshow_demo/01.jpg",
                           "http://www.jpgmovie.com/xml/1.1.3/jpgMovieSample.xml" );

Click Here to View the jpgMovie download on demand example

Our suite of webmaster tools for handling timelapse jpg movies can auto-select the starting photo from the sequence of photos.

jpgMovie Tutorial