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


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=""></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'>



You have to specify width and height parameters in order to make everything work.


8. Add plugin call somewhere after image









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:











9. You can specify only several options by now:



default value




if you want to use zoom option



the folder where your zoom images are located. You have to specify path relatively to the folder where your small images located.



path to PHP script relatively to yor HTML file



Set to true to change rotation direction



Set to true to hide Dopeless Rotate logo



Set a start frame



If to use PHP to load photos



Comma separated list of photose to be used by plugin (set nophp to true)



Comma separated list of zoom photose to be used by plugin (set nophp to true)



If to show hotspots



Title of hotspots menu



If to use fade effects on hotspots



Set to true if you want to initialize rotation on mouse movement on Y axis (will disable rotation icon in top right corner)



External controls - class for element for rotation right



External controls - class for element for rotation left



External controls - class for element for play/stop



Option to start auto rotation



Speed of auto rotation



If Set to false, rotates automatic only one time after load



If to rotate on mousehover



If you have problems with panning zoomed images, try to slightly increase this value (1 to 10)



If to rotate on mousewheel rotation



Example of using options:











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>


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:






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.  

Created by Dopeless Design


blog comments powered by Disqus