StereoImage

Showing the 3D nature of your images

Your browser does not support the canvas element.

To use you'll need a JPS or PNS file, which are steroscopic images (which basically mean two jpegs or pngs next to each other in the same image):

1. Add the Canvas element and the JavaScript to your webpage, (you'll also need to include the imageloader.min.js file)

		<canvas id="myCanvas" width="800" height="700" style="border:1px solid #c3c3c3;">
		Your browser does not support the canvas element.
		</canvas>

		<script type="text/javascript" src="imageloader.min.js></script>
		<script type="text/javascript" src="stereoimage.js"></script>
	

2. Now call the StereoImage class to do it's stuff with a little Javascript:

		<script type="text/javascript">
			var settings = {
				'canvas-id' : "myCanvas",
				'filename' : 'test-image.jps',
				'default-display-type' : 2,
				'default-draw-type' : 6
				'stereoscopic-scale' : 0.45,
				'flick-rate' : 280,
				}
	
			var stereoImage = new StereoImage( settings );

		</script>
   

The StereoImage class understands these settings:

• 'canvas-id' : Compulsory. The canvas you want to use.
• 'filename' : Compulsory. The name of the image to load.
• 'default-display-type' : Optional. The startup type of display to show, 0, to 2, defaults to 2.
• 'default-draw-type' : Optional. The startup type of drawing to use, 0 to 6, defaults to 3.
• 'stereoscopic-scale' : Optional. The amount to scale the stereoscopic drawing.
• 'flick-rate' : Optional. The time in millisceonds before switching to the other image in flick draw mode.

Another example with all possible settings.