Cloud image 360 View is a simple, interactive resource that can be used to provide a virtual tour of your product. Attract your customers with a stunning 360 display of your products.
Autoplay (desktop only), Circle bottom 360-degree view, Arrow keys support (desktop only), Magnifier (desktop only), Inner box-shadow, 360 product view examples
Must Read: A Simple And Beautiful 360° Product Viewer Built on Vue.js
How to make use of it:
1. Add script tag with cdn link to js-cloudimage-360-view lib after all content in the body tag.
<script src="/v7/plugins/js-cloudimage-360-view/latest/js-cloudimage-360-view.min.js"></script>
2. After adding the js-cloudimage-360-view lib, simply initialize it with the class name ‘cloudimage-360‘, server folder path, file name, and image quantity:
<div
class="cloudimage-360"
id="gurkha-suv"
data-folder="/v7/demo/suv-orange-car-360/"
data-filename-x="orange-{index}.jpg"
data-amount-x="73"
></div>3. Configure js cloudimage 360 view plugin.
window.CI360.init();
<script>window.CI360 = { notInitOnLoad: true }</script>
<script src="/plugins/js-cloudimage-360-view/3.0./js-cloudimage-360-view.min.js"></script>
<script>window.CI360.init(); // initialize the plugin when you need</script>Popup
Only the property inserted will be displayed.
Must Read: Animation Rotation via Scroll, Mouse & Touch Events | circlr
| Property | Type | Default | Description |
|---|---|---|---|
| images | Array | [] | To display a carousel of images we need an array of objects, each object should include the src and the alt of each image |
| title | String | null | Display the title underneath the images |
| description | String | null | Display the description underneath the title |
| moreDetailsUrl | String | null | Display a button underneath the description to navigate to a provided URL |
| moreDetailsTitle | String | null | Set the title of the more details button |
Properties
Must Read: A Javascript Library To Animate Frames From Sprite Image Plugin
| Property | Type | Default | Description |
|---|---|---|---|
| popupSelector | String | null | Set className to the popup wrapper |
| open | Boolean | false | Open the popup |
| arrow | Boolean | true | Display an arrow that points toward the hotspot element |
| offset | Array | [0, 0] | Set a distance between the hotspot element and the popup |
| placement | String | Auto | – we can adjust the position of the hotspot popup relative to the hotspot element. (top-bottom – left-right) |
See Demo And Download
Official Website(scaleflex): Click Here
This superior jQuery/javascript plugin is developed by scaleflex. For extra advanced usage, please go to the official website.
