HOT Spinner – Joomla 3D Image Rotator

HotJoomla Extention – HOT Spinner is Joomla module that rotates images around a circle in 3D. In the center of the circle, there’s an info box that shows relevant content for each image in the rotation. You can also control rotation with mouse moves. This Flash-like software is 100% based on jQuery (no Flash needed).

Parameters of this module allow you to set overall width and height and make the module fit into your available space. You can also control rotation radius and perspective angle. You can select vertical position of the info box and select one of three available animation effects for the box. Rotation speed parameter of the icons/images is also customizable. You can enable reflection of the images and control its height and opacity. Fonts of the info box are customizable, so you can easily select font for the headings and font for the info box text. You can also change the font’s color and style. In the info box, there’s also an image beside text that can be left or right aligned.



You can enter content for the module into ten available “content slots”. Each slot allows you to select rotating and static images. The rotating image is one that rotates, while the static image is the image that appears in the info box. For each slot you can have different heading and text. You can also assign links to the heading of the slots.


Try to “drag” the spinner. Move curser over any image in the spinner, click left mouse button and move it to the left or to the right side. You can also stop the spinner with double-click.

Module Settings

  • Load jQuery: Select wheter to load jQuery library or not. If your template already loads it, you may disable this to avoid possible javascript errors.
  • Image Encoding: Select wheter to encode images or not.
  • Module Width/Height: Enter module width/height in pixels (in example 960).
  • Background Color: Module’s background color
  • Images Directory: Path to your folder with images (relative to your Joomla path). This option is not needed in Joomla 1.6, so it’s removed in this version.
  • Static Image Width: Enter value in pixels (in example 60).
  • Static Image Position: Select image position left or right.
  • Rotating Image Width/Height: Enter value in pixels (in example 120).
  • Info Box Width/Height: Enter value in pixels (in example 380).
  • Info Box Vertical Position: Enter info box vertical position in percents (in example 60). Value can be from 0 to 100. If you enter 0, the bottom side of the info box will be even with the top side of the module space. If you enter 100, the bottom side of the info box will be even with the bottom side of the module space.
  • Info Box Animation: Select between slide, up-down and fade.
  • Info Box Animation Speed: Enter animation speed in milliseconds (in example 600).
  • Rotation Speed: Enter rotation speed in 1/X radians. Minimum value is 1 (in example 18). Lower value = faster rotation. To decrease rotation speed, enter a higher value.
  • Rotation Direction: Select clockwise or counter-clockwise.
  • Rotation Radius: Enter distance from the center of the circle to the rotating images, in pixels (in example 350).
  • Perspective Angle: Perspective angle value is between 0 and 1. If you set 0, you will see rotation as if you are on the ground level. If you set 1, you will see rotation from the birds eye view. Any decimal value between 0 and 1 is possible, in example 0.1.
  • Stop Rotation on Double-Click: Enable or disable this feature.
  • Reflection: Enable or disable reflection of images.
  • Reflection Height: Enter reflection height (value between 0 and 1): 0 = no reflection, 1 = full height.
  • Reflection Opacity: Enter reflection opacity: minimum value is 1 for no opacity, heigher value gives more opacity to the rotating images.

Fonts Settings

You can select font family (all standard web safe fonts included), font size (in pixels), font weight (normal or bold) and font color for heading and text fonts inside the info box.

Content Slots

Each of ten slots has these parameters:

  • Slot State: Enable slot to show it in module.
  • Static Image: Enter static image name in example image.jpg (for Joomla 1.5), or select file on server (for Joomla 1.6).
  • Rotating Image:Enter static image name in example image.jpg (for Joomla 1.5), or select file on server (for Joomla 1.6).
  • Heading Text: Text that will be displayed as heading of the slot in the info box.
  • Description Text: Text that will be displayed as description of the slot in the info box.
  • Link: Slot headings and static images can be linked (it’s optional for each slot).

Leave a comment