Dopeless Rotate is Jquery plugin for 360 degree product visualisation designed by Dopeless Design. It features:

  • Configurable hotspots
  • Zooming function
  • Support of touchscreen devices
  • Ability to use multiple instances on a single page
  • You can use every number of images for 360 degree visualisation you want
  • Images are loaded automatic via PHP or manually without server-side scripts
  • Preloader is showing the progress of loading images to cache
  • Preloader for loading zoomed image
  • Nice modern design

Please feel free to contact me about bugs, or just leave a comment. (Current ver. 1.2.5)

360 degrees product view examples

Dopeless Rotate minified demos

Dopeless Rotate live examples

News

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.

How to use

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'
      });
}
);

 

 

To Do

Full support of touch screen devices (added in ver. 0.8b on 12.07.2012)

Support for multitouch gestures

Option to load images via JS

Option to use same images for normal and zoom view

Please, leave a comment if you need something else

Dopeless Rotate licensed under Creative Commons Attribution-NonCommercial 3.0 license.

You can freely use Dopeless Rotate for your personal non-commercial projects.
If you want to use Dopeless Rotate for commercial purposes, you have to pay a fee.

You must provide a link to this page by repost.   

Discussions

blog comments powered by Disqus