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.
Sequence demo with frames | Source code |
---|---|
![]() |
|
Sprite demo with single image | Source code |
---|---|
![]() |
|
1. <script src="jslibs/jquery.js" type="text/javascript"></script>
2. <script src="jslibs/jquery.mousewheel.js" type="text/javascript"></script>
3. <script src="jslibs/viewer3d.js" type="text/javascript"></script>
<img inlineOpts="'sprite':'3d_imgs/sprite.jpg','frames':[7,2]"
style="width:250px;height:188px;" src="3d_imgs/110604-113522 12.jpg"
alt="test1" class="demo" />
$(document).ready(function(){
$('.demo').viewer3d();
});
or
$('.demo').viewer3d();
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. |
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) |
This plugin can be use with a sequences of images or with a unique sprite image containing the single images frames.
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;
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]
});
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.
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.
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