Viewer3D Javascript

Description:

Viewer3D is a small jQuery plugin for displaying a 360° view of a sequences of images or panorama. It is simple, lightweight, no flash needed, no extra css need, fast and compatible with all major browsers and touches devices. It has been tested on Android browsers, Ipad browser, IE 6,7,8,9 , Firefox, Chrome, Safari and Opera.

Examples:

Sequence demo with frames Source code
test1
			
			1.	<img  inlineOpts="sensivity:10,prefix:'110604-113522 ',startFrame:12,frames:14" 
				style="width:250px;height:188px;" src="3d_imgs/110604-113522 12.jpg" 
				alt="test1" id="demo_frames" />

			2.	$('.demo').viewer3d();
			
			
Sprite demo with single image Source code
test1
			

			1.	<img  inlineOpts="'sprite':'3d_imgs/sprite.jpg','frames':[7,2]" 
				style="width:250px;height:188px;" src="3d_imgs/110604-113522 12.jpg" 
				alt="test1" id="demo_frames" />

			2.	$('.demo').viewer3d();
			
			

Installation:

Options:

All these option can be specified in the inlineOpts of the image, or can be set globally when the plugin is called ($('.demo').viwer3d({ opts...})). The inlineOpts will override global options.

Option Type Default Description
images Array none Specifies the source of images to rotate in an array (['img1.jpg','img2.jpg','img3.jpg',...])
imagesPath String src basepath The directory where to search for sequences images. If not specified, the search dir will be the same as the preview image dir.
prefix String '' Set the prefix of images frames that will be search with the imagePath option
startFrame Int 1 Set the count number for the images frames. Usefull when having images sequences starting from another number count rather than 1. (img10.jpg, img11.jpg,img12.jpg...)
sprite String '' The url (src) of the single sprite image.
frames Int,Object 10 Specifies the number of images to search in case of imagePath option, or specifies the rows and columns (in Object) of the sprite image in case of sprite Specified(ex. [6,6] indicate a 6x6 sprite image)
sensivity calculated none Set the sensivity in pixel for image rotating. Default value is calculated:ImageWidth/(frame number).
autoRotation Int 1 Set the number of autorotation that are done on load.
direction Int 1 The rotation direct, -1 inverse on mouse move, 1 the same as mouse move.
speed milliseconds 70 Set the autorotation speed. Smaller values faster rotation, bigger values slower rotation.

Methods:

Method Description Example
destroy Destroys the viewer3d and restore the original images view. $('.demo').viewer3d('destroy')
Options Set or get the option of the viewer. get autos=$('.demo').viewer3d('option','autoRotation') or set $('.demo').viewer3d('option','autoRotation',3)

Usage:

This plugin can be use with a sequences of images or with a unique sprite image containing the single images frames.

Set up with a set of images:

For examples if you want to set up the 3d with a set of ordered images, you will have to set the imagesPath option, the prefix option and the startFrame option:
If I have this images files (typical shootcamera): myimages/IMG_0846.JPG, myimages/IMG_0847.JPG, myimages/IMG_0848.JPG,myimages/IMG_0849.JPG, myimages/IMG_0850.JPG, myimages/IMG_0851.JPG, myimages/IMG_0852.JPG, myimages/IMG_0853.JPG The set up options will be:

	
	inlineOpts="'prefix':'IMG_0','frames':8,startFrame:846,'imagesPath':'myimages'" 
	
	or
	
	$('#myid').viewer3d({
		'prefix':'IMG_0',
		'frames':8,
		'startFrame':846,
		'imagesPath':'myimages'//optional, if images are in the same dir as preview image
	});
	//final image name will be calculated:
	src=imagesPath+'/'+prefix+(nth_frame+startFrame)+extension;
	
	

Set up single image with frames:

This is the raccomanded case to use because you have a single image that simulates the 3d effect. The single image must be a retangle with frames (example), and in the option you have to indicate the rows and columns of the retangle.
For example if I have a sprite image made by 7 columns and 2 rows (example) the set up options will be:

	
	inlineOpts="'sprite':'3d_imgs/sprite.jpg','frames':[7,2]"
	
	or
	
	$('#myid').viewer3d({
		'sprite':'3d_imgs/sprite.jpg',
		'frames':[7,2]
	});
	
	

Width and Height:

The width and the height of the display image is calculated with this priority:

So it doen't matter the dimensions of the sprite image, it will always be adapted to match the initial preview image dimensions.

Tested, Works, Compatible with:

I have tested this plugin with: Firefox 3.x-4.x, IE 6,7,8 (IEtester), IE9, Chrome 5-11, Safari, Opera, Android browser (On Hawei Ideos) and Ipad.

Performance:

This is a small plugin lightweight just 6.07Kb compressed with YUIcompressor, and 10Kb uncompressed and the calculation inside are optimize to use less CPU possible.

AlbanX