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.