Content - Orbit is a Joomla content plugin that transforms your articles, images, or modules into a stunning 3D rotating carousel. Unlike traditional sliders, Orbit displays all items simultaneously in a 3D circle, with each item dynamically positioned in 3D space for a captivating user experience. Built on David DeSandro’s foundational 3D transforms (https://3dtransforms.desandro.com/carousel), Orbit offers flexible configuration through global settings or per-carousel data- attributes, plus robust scripting controls for developers. Compatible with Joomla 4.x and 5.x, Orbit is lightweight and optimized for performance.
Content - Orbit Installation
- Download: Get the latest version of Content - Orbit from richeyweb.com or the Joomla Extensions Directory.
- Install: Log in to your Joomla admin panel, navigate to System > Install > Extensions, and upload the plugin file.
- Enable: Go to System > Manage > Plugins, search for “Content - Orbit,” and enable the plugin.
Configuration
Content - Orbit offers flexible configuration through the plugin’s settings in the Joomla admin panel. You can set global defaults for all carousels or override them for individual carousels using the optional data- attributes (see Usage below). Omitting data- attributes cause the plugin to use the defaults set in plugin configuration. The following options are available:
- Aspect Ratio: (data-aspectratio="NxN") Set the aspect ratio of carousel items, affecting their display size and shape. Options include 1x1, 4x3, 16x9, 21x9, or custom NxN (e.g., 2x1). When using the data-aspectratio attribute, replace the colon with an ‘x’ (e.g., data-aspectratio="16x9").
- Timer: (data-timer="N") Set the time interval (in milliseconds) for automatic rotation. Enter a value (e.g., 3000 for 3 seconds) or 0 to disable auto-rotation, allowing manual control via buttons or custom scripts.
- Orientation: (data-orientation="[horizontal|vertical]") Choose Horizontal or Vertical to determine the carousel’s rotation axis.
- Direction: (data-direction="[forward|backward]") Select Forward or Backward to set the rotation direction for automatic or manual movement.
- Pause on Hover: (data-pauseonhover="[0|1]") Enable (Yes) or disable (No) to pause rotation when users hover over the carousel, improving readability.
To configure global settings:
- Go to System > Manage > Plugins in your Joomla admin panel.
- Find and edit “Content - Orbit.”
- Adjust the settings as needed and save.
Content - Orbit Usage
Content - Orbit requires a minimum of three .carousel__cell elements to create a proper 3D carousel display. Add the following structure to your Joomla article, module, or template:
<div class="plg_content_orbit" id="orbit1" data-aspectratio="16x9" data-timer="3000" data-orientation="horizontal" data-direction="forward" data-pauseonhover="yes">
<div class="carousel-options">
<button class="previous-button">Previous</button>
<button class="next-button">Next</button>
</div>
<div class="scene">
<div class="carousel">
<div class="carousel__cell">Item 1 Content</div>
<div class="carousel__cell">Item 2 Content</div>
<div class="carousel__cell">Item 3 Content</div>
</div>
</div>
</div>
- Class: The outer <div> must have the plg_content_orbit class to trigger the plugin’s JavaScript, which transforms the HTML into a 3D carousel.
- ID (Optional): Add an id (e.g., id="orbit1") to easily access the carousel for scripting (see Advanced Customization).
- Data Attributes: Optionally include data- attributes to override global settings:
- data-aspectratio="1x1" (or 4x3, 16x9, 21x9, or custom NxN, e.g., 2x1)
- data-timer="3000" (milliseconds, or 0 to disable auto-rotation)
- data-orientation="horizontal" (or vertical)
- data-direction="forward" (or backward)
- data-pauseonhover="1" (or 0)
- Content: Each <div class="carousel__cell"> can contain text, images, HTML, or Joomla modules. A minimum of three .carousel__cell elements is required for the 3D effect to render correctly.
After adding the structure, ensure the plugin is enabled, publish your content, and the carousel will display automatically.
Adding Navigation Buttons
The .carousel-options div is entirely optional. If included for previous and next buttons, it must be a direct child of the .plg_content_orbit div (placed before or after the .scene div):
<div class="carousel-options">
<button class="previous-button">Previous</button>
<button class="next-button">Next</button>
</div>
Place this div directly within the .plg_content_orbit div. Orbit’s JavaScript will detect and bind these buttons to navigate the carousel. If omitted, the carousel relies on auto-rotation (if enabled) or custom scripting controls.
Advanced Customization
For developers, Orbit provides powerful scripting controls via the orbit property, automatically assigned to the .plg_content_orbit element when the plugin initializes. Access it using any DOM method, such as:
javascript
const orbit = document.getElementById('orbit1').orbit;
Available methods:
- startTimer(): Starts the timed rotation.
- stopTimer(): Stops the timed rotation.
- prevCell(): Advances to the previous cell.
- nextCell(): Advances to the next cell.
- toCell(N): Advances to the Nth cell in a zero-indexed array (e.g., toCell(0) for the first cell, toCell(2) for the third cell).
- rotateCarousel(): Rotates one cell in the configured direction.
Example:
javascript
// Stop the carousel
orbit.stopTimer();
// Move to the third cell
orbit.toCell(2);
Create custom controls (e.g., buttons, sliders, or event triggers) by calling these methods. For example:
html
<button onclick="document.getElementById('orbit1').orbit.toCell(0)">Go to First Item</button>
The JavaScript dynamically calculates the position of any number of .carousel__cell elements (minimum three) in 3D space, adjusting the radius and angles based on the number of items and the carousel’s dimensions. For styling, target the .plg_content_orbit, .scene, .carousel, or .carousel__cell classes in your CSS. Refer to the demo pages on richeyweb.com for examples.
Troubleshooting
- Carousel not displaying? Ensure the plugin is enabled, the HTML structure includes at least three .carousel__cell elements (required for the 3D effect), and the plg_content_orbit class is present.
- Buttons not working? Verify the .carousel-options div, if used, is a direct child of .plg_content_orbit and contains .previous-button and .next-button classes.
- Custom ratios not working? Use NxN format (e.g., data-aspectratio="2x1") instead of colons.
- Scripting issues? Ensure the orbit property is accessed after the carousel initializes (e.g., after DOMContentLoaded); check the browser console for errors.
- Performance issues? Minimize the number of items or optimize images for faster loading.
For further assistance, visit the support forum on richeyweb.com.
Compatibility
- Joomla 4.x and 5.x
- Requires modern browsers supporting CSS 3D transforms (e.g., Chrome, Firefox, Safari, Edge).
Content - Orbit Licensing
Content - Orbit is absolutely free to download, use, and customize. No premium or paid features—just powerful 3D carousels for your Joomla site.
Credits
Content - Orbit is built on the foundational 3D transform calculations by David DeSandro (https://3dtransforms.desandro.com/carousel), adapted for seamless integration with Joomla.
