24.07.2013 - Update to version 1.2.5
Hotspot links are added
28.05.2013 - Update to version 1.2.4
Autoscale for low display resolution is added
minor bugfixes
23.05.2013 - Update to version 1.2.3
Option to rotate with mousewheel is added
23.05.2013 - Update to version 1.2.2
Play/Stop external control added
One loop auto rotation added
Rotation on mousehover added
Issues with external controls on touchscreen devices fixed
24.03.2013 - Update to version 1.2.1
Autoplayback added
Highlights options extended
19.03.2013 - Update to version 1.2
External controls added
Script optimization
Bugs fixed
12.03.2013 - Update to version 1.1.6
Some bugs fixes.
12.03.2013 - Update to version 1.1.5
Some bugs fixes.
12.03.2013 - Update to version 1.1.0
Touch device detection fixed.
29.01.2013 - Update to version 1.0.8
Minor fixes for Firefox
22.01.2013 - Update to version 1.0.7
An option to change rotation axis is added - now you can select if to initialize rotation on mouse movement on X or Y axis
21.01.2013 - Update to version 1.0.5
FIxes for hotspots on touch devices
21.01.2013 - Update to version 1.0
Added hotspot functionality
Added option to load images without PHP
Some minor fixes
23.07.2012 - Update to version 0.9b
Added some new options. Some major code improvements. Touchscreen devices support improvement.
12.07.2012 - Update to version 0.8b
Added support for touchscreen devices. Just replace an dopelessRotate.js script with a new one.
Some feedback in comments wolud be nice.
1. Download Dopeless Rotate package, that includes:
-
dopelessRotate
-
css
-
style.css - main CSS
-
ajax-loader.gif - animated GIF for preloading zoomed images
-
zoomin.png - zoom in icon
-
zoomout.cur - zoom out icon
-
scripts
-
dopelessRotate.js - Jquery plugin
-
dopelessRotate.min.js - Plugin minified version
-
loadimages.php - PHP script for image loading
2. Extract package contents somewhere on your server.
3. Include dopelessRotate.js plugin in <head> section of your HTML after Jquery main library connection.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="dopelessRotate/scripts/dopelessRotate.js"></script>
4. Provide Link to CSS file in <head> section of your HTML
<link rel="stylesheet" href="dopelessRotate/css/style.css" type="text/css" media="screen"/>
5. Create a folder for images on your server. You have to create separate folder for each product you are going to visualise. All the images from specified folder will be loaded to 360 degree view window. You have to enumerate images in the order you want them to appear. All images should have same dimensions.
6. If you want to enable image zooming, create another folder called zoomimages inside the folder you have created in step 5 for big images and enumerate them same way, as small images. All images should have same dimensions. The folder can be created in other location too - see step 9.
7. Add the first image (from a folder with small images) wrapped by container with “dopelessrotate” class to your HTML.
<div class=’dopelessrotate’>
<img id='rotateimage' src='images/01/0001.jpg' width='450' height='324'>
</div>
You have to specify width and height parameters in order to make everything work.
8. Add plugin call somewhere after image
<script>
$(document).ready(function(){
$('#rotateimage').tsRotate({
});
});
</script>
To use multiple instances on a single page you have to add several images (step 7) with unique IDs. Then you have to run plugin for every image. For example:
<script>
$(document).ready(function(){
$('#rotateimage_01').tsRotate({
});
$('#rotateimage_02').tsRotate({
});
});
</script>
9. You can specify only several options by now:
|
option
|
default value
|
description
|
|
zoom
|
true
|
if you want to use zoom option
|
|
zoomfolder
|
zoomimages
|
the folder where your zoom images are located. You have to specify path relatively to the folder where your small images located.
|
|
pathtopho
|
dopelessRotate/scripts/
|
path to PHP script relatively to yor HTML file
|
|
reverse
|
false
|
Set to true to change rotation direction
|
|
disablelogo
|
false
|
Set to true to hide Dopeless Rotate logo
|
|
startfrom
|
0
|
Set a start frame
|
|
nophp
|
false
|
If to use PHP to load photos
|
|
nophpimglist
|
|
Comma separated list of photose to be used by plugin (set nophp to true)
|
|
nophpzoomlist
|
|
Comma separated list of zoom photose to be used by plugin (set nophp to true)
|
|
hotspots
|
false
|
If to show hotspots
|
|
hotspotsTitle
|
Highlights
|
Title of hotspots menu
|
|
hotspotsFade
|
true
|
If to use fade effects on hotspots
|
|
cahngeAxis
|
false
|
Set to true if you want to initialize rotation on mouse movement on Y axis (will disable rotation icon in top right corner)
|
|
rightclass
|
|
External controls - class for element for rotation right
|
|
leftclass
|
|
External controls - class for element for rotation left
|
|
playstopclass
|
|
External controls - class for element for play/stop
|
|
autorotate
|
false
|
Option to start auto rotation
|
|
autorotatespeed
|
100
|
Speed of auto rotation
|
|
roteteloop
|
true
|
If Set to false, rotates automatic only one time after load
|
|
rotatehover
|
false
|
If to rotate on mousehover
|
|
speedmultiplyer
|
1
|
If you have problems with panning zoomed images, try to slightly increase this value (1 to 10)
|
|
wheelRotate
|
false
|
If to rotate on mousewheel rotation
|
Example of using options:
<script>
$(document).ready(function(){
$('#tsrimage').tsRotate({
'zoom':false,
‘pathtophp’:’plugins/dopelessRotate/scripts/’
});
});
</script>
Hotspots usage:
In order to use hotspots you have to:
1. In your HTML add <a> elements for every hotspot after the corresponding image.
<div class='dopelessrotate'>
<img id='rotateimage' src='images/01/0001.jpg' width='450' height='324'>
<a class='sethotspot' href='0' title='Big Display' posix='65' posiy='74'>Big and bright multi-dot display.</a>
<a class='sethotspot' href='0' title='Navigation Buttons' posix='23' posiy='60'>Navigation buttons on device to operate without remote control.</a>
<a class='sethotspot' href='15' title='HDMI' posix='69' posiy='60'></a>
<a class='sethotspot' href='22' title='CI Slot' posix='70' posiy='70'>Use CI Adapter to receive encoded channels!</a>
</div>
Every <a> element must contain
-
class “sethotspot”
-
href attribute - refers to a frame where hotspot will be shown. For example if you want to show hotspot on fifth picture in your sequence you have to add href=”5” to <a> element
-
title attribute - is a title for hotspot
-
posix attribute - position on X-axis (in percents from left)
-
posiy attribute - position on Y-axis (in percents from top)
-
nomenu (optional) - set to “1” to exclude hotspot from navigation menu
-
content of <a> element (optional) - content of an expanded hotspot
-
link attribute (optional) - hotspot link (use with http://)
-
target (optional) - link target - use html values, leave blank for "_self"
2. You have to set hotspots option to true.
External controls usage:
1. Add elements for rotation right and left in your HTML for every instance of Plugin, you want to control. For example:
<a class='gleft btn rotateimage'>Rotate left</a>
<a class='playstop btn rotateimage'>Play</a>
<a class='gright btn rotateimage'>Rotate right</a>
You have to specify classes:
.gleft - class for script options. You have to specify this class in plugin call options.
.rotateimage - this class defines which instance of plugin this element must control. Must be the same, as ID for main script image
.btn - optional class to style element.
Then call the plugin in such way:
$(document).ready(function(){
$('#rotateimage').tsRotate({
'rightclass':'gright',
'playstopclass':'playstop',
'leftclass':'gleft'
});
});
