js-cloudimage-360-view
Advanced tools
360 Views, Infinite Possibilities: Unleash the Power of js-cloudimage-360-view!
The js-cloudimage-360-view project revolutionizes interactive 360-degree image viewing experiences. With robust build and deployment scripts, it simplifies development processes. Key features include viewer initialization, hotspot functionality, and dynamic configuration utilities. Ideal for e-commerce platforms and virtual tours, it offers immersive and engaging user experiences.
| Feature | Summary | |
|---|---|---|
| ⚙️ | Image Viewing |
|
| 🔩 | Customization |
|
| 📄 | Documentation |
|
| 🔌 | Framework Support |
|
| ⚡️ | Performance |
|
| 📦 | Dependencies |
|
You can install js-cloudimage-360-view using one of the following methods:
Include the CDN link to the js-cloudimage-360-view library at the end of your <body> tag. Additionally, make sure to include the corresponding CSS file for proper styling:
<link rel="stylesheet" href="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/latest/js-cloudimage-360-view.min.css">
<script src="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/latest/js-cloudimage-360-view.min.js?func=proxy"></script>
To ensure the js-cloudimage-360-view functionality works correctly, you must also include the CSS file. This is crucial for proper styling and display of the plugin.
This is the quickest way to get started without additional setup.
You can add js-cloudimage-360-view to your project using either npm or Yarn:
For npm:
npm install js-cloudimage-360-view
For Yarn:
yarn add js-cloudimage-360-view
Then, import it in your JavaScript file:
import CloudImage360 from 'js-cloudimage-360-view';
OR
window.CI360
Choose the method that best suits your project setup, and refer to the documentation for configuration options and usage examples.
To use js-cloudimage-360-view, you need to initialize an instance of the viewer. You can either initialize a specific view or initialize all instances with a common selector.
To initialize a single 360-degree view, use the following code:
const cloudimage360 = new CloudImage360();
const suvCarContainer = document.getElementById('gurkha-suv');
const config = {
folder: 'https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/',
filenameX: 'orange-{index}.jpg',
amountX: 73,
responsive: 'scaleflex',
};
instance.init(suvCarContainer, config);
To initialize all instances with a common selector, use the following code:
instance.initAll('.cloudimage-360');
This will apply the 360-degree viewer to all elements matching the specified selector.
When initializing the js-cloudimage-360-view, you can customize various configuration options. Below is a list of available options, their required status, default values, and the corresponding data attributes you can use in HTML.
To initialize a view programmatically, use the following configuration options:
You can also initialize the view using HTML data attributes, which correspond to the configuration options listed below.
For example:
<div id="gurkha-suv"
data-folder="/path/to/images/"
data-api-version="v7"
data-amount-x="73"
data-speed="80"
data-draggable="true">
</div>
| Option | Data Attribute | Required | Default Value | Description |
|---|---|---|---|---|
folder | data-folder | Yes | '/' | The path to the folder containing the images. |
apiVersion | data-api-version | No | 'v7' | The API version to use. |
filenameX | data-filename-x | Yes | 'image-{index}.jpg' | The filename pattern for the X-axis images. |
filenameY | data-filename-y | No | null | The filename pattern for the Y-axis images (optional). |
imageListX | data-image-list-x | No | null | An array of images for the X-axis (optional). |
imageListY | data-image-list-y | No | null | An array of images for the Y-axis (optional). |
indexZeroBase | data-index-zero-base | No | 0 | Whether the index starts from 0. |
amountX | data-amount-x | Yes | 0 | Total number of X-axis images. |
amountY | data-amount-y | No | 0 | Total number of Y-axis images (optional). |
speed | data-speed | No | 80 | The speed of the rotation in milliseconds. |
dragSpeed | data-drag-speed | No | 150 | The speed when dragging the image. |
draggable | data-draggable | No | true | Enables dragging functionality. |
swipeable | data-swipeable | No | true | Enables swipe functionality on touch devices. |
keys | data-keys | No | false | Enables keyboard navigation. |
keysReverse | data-keys-reverse | No | false | Reverses keyboard navigation controls. |
autoplay | data-autoplay | No | false | Automatically plays the rotation. |
autoplayBehavior | data-autoplay-behavior | No | AUTOPLAY_BEHAVIOR.SPIN_X | Defines how autoplay behaves. |
playOnce | data-play-once | No | false | Plays the animation only once. |
autoplayReverse | data-autoplay-reverse | No | false | Plays the autoplay in reverse. |
pointerZoom | data-pointer-zoom | No | 0 | Defines the zoom level on pointer hover. |
fullscreen | data-fullscreen | No | false | Enables fullscreen mode. |
magnifier | data-magnifier | No | null | Defines the magnification level (optional). |
bottomCircle | data-bottom-circle | No | true | Displays the bottom circle navigation. |
bottomCircleOffset | data-bottom-circle-offset | No | 5 | The offset of the bottom circle from the container. |
ciToken | data-responsive | No | null | Token for Cloudimage API authentication (optional). 🗺️ Cloudimage responsive integration |
ciFilters | data-filters | No | null | Filters applied to Cloudimage images (optional). |
ciTransformation | data-transformation | No | null | Transformations for Cloudimage images (optional). |
lazyload | data-lazyload | No | true | Enables lazy loading of images. |
dragReverse | data-drag-reverse | No | false | Reverses drag direction. |
stopAtEdges | data-stop-at-edges | No | false | Stops the rotation at the edges. |
imageInfo | data-info | No | false | Displays image information. |
initialIconShown | data-initial-icon | No | true | Shows the initial icon on load. |
The library will automatically read these attributes to configure the instance.
An array defines the configuration for hotspots or markers that can be displayed on the 360 view. Each hotspot can provide additional information or interactivity.
Each hotspot configuration consists of the following properties:
| Property | Required | Description |
|---|---|---|
id | Yes | A unique identifier for the hotspot. |
orientation | Yes | The orientation of the hotspot (e.g., 'x' for X-axis). |
containerSize | Yes | An array defining the width and height of the container in pixels (e.g., [width, height]). This size represents the dimensions of the container when you first start setting the hotspots. |
positions | Yes | An object where keys are indices (image indexes) representing the position of the hotspot for specific images. |
content | Yes | HTML content to display in the tooltip when the hotspot is hovered or clicked. |
onClick | No | A function that defines the behavior when the hotspot is clicked (optional). |
The positions property is an object where:
x and y properties, representing the coordinates of the hotspot on the image.If either the x or y value is null, it means that the hotspot will take the coordinates from the previous defined position for that index.
For example:
positions: {
6: { x: 607, y: 246 },
7: { x: 619, y: null }, // y is null, so it takes the previous y (246)
8: { x: 630, y: null }, // y is null, so it takes the previous y (246)
9: { x: 637, y: null }, // y is null, so it takes the previous y (246)
10: { x: 642, y: null }, // y is null, so it takes the previous y (246)
},
Here's an example configuration for multiple hotspots:
const GURKHA_SUV_HOTSPOTS_CONFIG = [
{
id: 'hotspot-1',
orientation: 'x',
containerSize: [1170, 663],
positions: {
0: { x: 527, y: 319 },
1: { x: 527, y: 319 },
2: { x: 527, y: null }, // Takes the previous position
3: { x: 498, y: null }, // Takes the previous y (319)
4: { x: 470, y: null }, // Takes the previous y (319)
// Additional positions...
},
content: '<div class="tooltip">Info about Hotspot 1</div>',
},
// Additional hotspots...
];
In the example above, the keys (0, 1, 2, 3, 4, ...) represent image indexes. If the y value is null, it inherits the y coordinate from the previous defined position. This allows for easier configuration and reduces redundancy.
The following class names are used for styling various elements within the 360-degree viewer and hotspot functionality. Each class serves a specific purpose in controlling the appearance and behavior of the component.
| Class Name | Description |
|---|---|
cloudimage-360-transition-overlay | Applies styling for the overlay that appears during transitions. |
cloudimage-360-button | Styles the main button for interacting with the 360 view. |
cloudimage-360-magnifier-button | Styles the button that activates the magnifier feature within the 360 view. |
cloudimage-loading-spinner | Styles the loading spinner displayed while the images are being loaded. |
cloudimage-initial-icon | Styles the initial icon displayed before the 360 view is fully loaded. |
cloudimage-360-icons-container | Styles the container for all icons associated with the 360 view (e.g., buttons, overlays). |
cloudimage-360-hotspot-container | Styles the container that holds the hotspots or markers in the 360 view. |
cloudimage-360-fullscreen-modal | Styles the modal that appears when the 360 view is in fullscreen mode. |
cloudimage-360-fullscreen-button | Styles the button that toggles the fullscreen mode of the 360 view. |
cloudimage-360-close-icon | Styles the close icon used to exit the fullscreen view. |
cloudimage-360-view-360-circle | Styles the circular view area of the 360 images. |
cloudimage-360-popper | Styles the popper element for displaying tooltips or additional information on hover or click. |
cloudimage-360-hotspot | Styles individual hotspots within the 360 view, allowing for customizable appearance and behavior. |
Customize these class names in your CSS files to match your application's design requirements.
getViewById(id)Returns the view object associated with the specified ID.
getViewById(id)
getViews()Returns an array of all the view objects currently available.
getViews()
updateView(id, config)Updates the configuration of an existing view identified by its ID. If the configuration has changed significantly, the view will be destroyed and reinitialized; otherwise, it will simply be updated.
updateView(id, config)
onMoveHandler(movingDirection, itemsSkippedX = 1, itemsSkippedY = 1)Handles the movement of items in the view. It takes a direction and the number of items to skip horizontally and vertically.
onMoveHandler(movingDirection, itemsSkippedX = 1, itemsSkippedY = 1)
Parameters:
movingDirection: A string indicating the direction of movement ('right', 'left', 'top', or 'bottom').itemsSkippedX: The number of items to skip in the horizontal direction (default is 1).itemsSkippedY: The number of items to skip in the vertical direction (default is 1).Integrating Cloudimage for responsive images enhances the loading speed and performance of your website. This service delivers optimized images over a Content Delivery Network (CDN), ensuring that your images are served quickly and efficiently, regardless of the user's location.
To see how Cloudimage transforms image delivery for responsive design, check out the full article on Medium. The article details the importance of responsive images in modern web development and how Cloudimage simplifies the process.
Before you start using the Cloudimage Responsive plugin, make sure you have the following:
Cloudimage Token: You'll need a unique Cloudimage token to deliver your images over their CDN.
Getting Your Token:
The token grants you 25GB of image cache and 25GB of worldwide CDN traffic per month for free. This is perfect for startups and small projects looking to enhance their website's performance without incurring costs.
js-cloudimage-360-view project.git clone https://github.com/Scaleflex/js-cloudimage-360-view
git checkout -b new-feature-x
git commit -m 'Implemented new feature x.'
git push origin new-feature-x
JS Cloudimage 360 View is provided under the MIT License
FAQs
<h1 a
We found that js-cloudimage-360-view demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.