How to Create a 360 Product View Using JavaScript | JS Cloudimage

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

PropertyTypeDefaultDescription
imagesArray[]To display a carousel of images we need an array of objects, each object should include the src and the alt of each image
titleStringnullDisplay the title underneath the images
descriptionStringnullDisplay the description underneath the title
moreDetailsUrlStringnullDisplay a button underneath the description to navigate to a provided URL
moreDetailsTitleStringnullSet the title of the more details button

Properties

Must Read: A Javascript Library To Animate Frames From Sprite Image Plugin

PropertyTypeDefaultDescription
popupSelectorStringnullSet className to the popup wrapper
openBooleanfalseOpen the popup
arrowBooleantrueDisplay an arrow that points toward the hotspot element
offsetArray[0, 0]Set a distance between the hotspot element and the popup
placementStringAuto– 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.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

vue-fullpage-modal

First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

Leave a Reply

Your email address will not be published. Required fields are marked *