Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
js-cloudimage-360-view
Advanced tools
Readme
Docs • Demo • Code Sandbox • Video Tutorial • Why
A simple, interactive resource that can be used to provide a virtual tour of your product.
powered by Cloudimage (Watch the video here)
To see the Cloudimage 360 view plugin in action, please check out the Demo page.
Add script tag with CDN link to js-cloudimage-360-view lib after all content in body tag
<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.7.1/js-cloudimage-360-view.min.js"></script>
After adding the js-cloudimage-360-view lib, simply initialize it with class name "cloudimage-360", server folder path, file name and amount of images:
<div
class="cloudimage-360"
data-folder="https://scaleflex.airstore.io/demo/360-car/"
data-filename="iris-{index}.jpeg"
data-amount="36"
></div>
Initialization of js cloudimage 360 view plugin.
window.CI360.init();
NOTE: initialization of the plugin runs on the script load. In case you need to postpone the initialization of the plugin you can disable it with notInitOnLoad param
<script>window.CI360 = { notInitOnLoad: true }</script> <script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2/js-cloudimage-360-view.min.js"></script> <script>window.CI360.init(); // initialize the plugin when you need</script>
Destroying a cloudimage 360 viewer instance will reset the HTML to its original state.
window.CI360.destroy();
Get the {index} of the image that is being viewed.
window.CI360.getActiveIndexByID('id_of_product');
You can customize the icons by adding the following classes:
.cloudimage-360 .fullscreen-icon {
background: url(https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/full_screen.svg) 50% 50% / cover no-repeat;
}
.cloudimage-360 .magnify-icon {
background: url(https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/loupe.svg) 50% 50% / cover no-repeat;
}
.cloudimage-360 .close-fullscreen-icon {
background: url(https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/cross.svg) 50% 50% / cover no-repeat;
}
.cloudimage-360 .reset-zoom-icon {
background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/ic-resize.svg?vh=248986) 50% 50% / cover no-repeat;
}
The selector for js-cloudimage-360-view lib.
Your images folder on server.
Allow to use a specific version of API.
data-api-version="v7"
data-api-version="null"
The filename pattern for your 360 image. Must include {index}, which the library will replace with a number between 1 and data-amount.
The filename pattern for Y-axis images. Must include {index}, which the library will replace with a number between 1 and data-amount-y.
Amount of images to load for 360 view.
Amount of images to load in Y-axis for 360 view.
Support for 360 spin by pressing arrow keys on keyboard.
Autoplay 360 spin view on load.
stops the autoplay after one complete cycle.
Changing autoplay behavior
Available behaviors (spin-x, spin-y, spin-xy, spin-yx)
Open 360 spin view in full screen modal.
Magnifier to zoom image.
enable magnifier in fullscreen modal.
Prevents page from jumping.
Autoplay 360 spin view on load.
disable mouse drag.
Speed of changing frames for autoplay in milliseconds.
Speed Factor of changing frames on drag event.
Spin direction, by default it uses counterclockwise (image indexes from 1 to data-amount).
Apply box shadow for container.
Display 360 view line at the bottom of container.
Hide 360 view icon.
URL of asset to use as the 360 view icon.
Spin direction using controls, by default it uses counterclockwise (image indexes from 1 to data-amount).
Blocks repeating images after reaching last image (or first image in opposite direction)
Bottom offset for 360 view line.
Left zero padding on filename. For example: index-zero-base="4" => image index will be "0004"
Option to add list of images instead of folder
& filename
.
example:
data-folder="https://scaleflex.airstore.io/demo/360-car/"
data-image-list='[
"iris-1.jpeg",
"iris-4.jpeg",
"https://scaleflex.airstore.io/demo/360-car/iris-12.jpeg",
"https://scaleflex.airstore.io/demo/360-car/iris-15.jpeg"
]’
Only 360 view images close to the client's viewport will be loaded, hence accelerating the page loading time. If set to true, an additional script must be included, see Lazy loading
Disable pointer zoom on desktop
Disable pinch zoom on mobile
Events to start pointer zoom
Available events (scroll, click)
Functions called after mouse leave the container
Available functions (resetZoom)
Multiple functions can be applied, separated by "," (comma)
Pointer zoom scaling factor
Pinch zoom scaling factor
Maximum scale that images can be resize to it with pointer or pinch zoom
Helper class to apply lazy-loading depending on library you choose, see Lazy loading
You can add controls by adding elements with the following classes: cloudimage-360-prev, cloudimage-360-next, cloudimage-360-top, cloudimage-360-bottom
.cloudimage-360 .cloudimage-360-prev, .cloudimage-360 .cloudimage-360-next {
padding: 8px;
background: rgba(255, 255, 255, 0.5);
border: none;
border-radius: 4px;
}
.cloudimage-360 .cloudimage-360-prev:focus, .cloudimage-360 .cloudimage-360-next:focus {
outline: none;
}
.cloudimage-360 .cloudimage-360-prev {
display: none;
position: absolute;
z-index: 100;
top: calc(50% - 15px);
left: 20px;
}
.cloudimage-360 .cloudimage-360-next {
display: none;
position: absolute;
z-index: 100;
top: calc(50% - 15px);
right: 20px;
}
.cloudimage-360 .cloudimage-360-prev:before, .cloudimage-360 .cloudimage-360-next:before {
content: '';
display: block;
width: 30px;
height: 30px;
background: 50% 50% / cover no-repeat;
}
.cloudimage-360 .cloudimage-360-prev:before {
background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');
}
.cloudimage-360 .cloudimage-360-next:before {
background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');
}
.cloudimage-360 .cloudimage-360-prev.not-active, .cloudimage-360 .cloudimage-360-next.not-active {
opacity: 0.4;
cursor: default;
}
<div
class="cloudimage-360"
data-folder="https://scaleflex.airstore.io/demo/indoor/"
data-filename="{index}.jpeg"
>
<button class="cloudimage-360-prev"></button>
<button class="cloudimage-360-next"></button>
<button class="cloudimage-360-top"></button>
<button class="cloudimage-360-bottom"></button>
</div>
See how it works (article on Medium)
To use the Cloudimage Responsive plugin, you will need a Cloudimage token to deliver your images over CDN. Don't worry, it only takes seconds to get one by registering here. Once your token is created, you can configure it as described below. This token allows you to use 25GB of image cache and 25GB of worldwide CDN traffic per month for free.
Enables cloudimage responsive plugin for 360 view.
Applies Cloudimage resize operations to your image, e.g. width, height, crop, face crop, rotate, prevent enlargement...
Multiple transformation operations can be applied to your image, separated by "&
" (Ampersand).
example:
data-transformation="w=400&h=200&func=fit"
Applies Cloudimage filters to your image, e.g. brightness, contrast, greyscale, blur, Sharpen...
Multiple filters can be applied, separated by ",
" (comma).
example:
data-filters="bright:15,contrast:30"
Lazy loading is not included into js-cloudimage-360-view by default. There are well thought libraries to achieve that. If you enable lazy loading in the configuration, you need to add an additional library like lazysizes, yall.js (Yet Another Lazy Loader), lozad.js to handle it.
Implementation example with lazysizes
Implementation example with yall.js
Implementation example with lozad.js
to save API calls you man want to use one of our cdn bundles:
CDN link to js-cloudimage-360-view 1.1.0 + lazysizes 4.1.7
<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.lazysizes.min.js"></script>
CDN link to js-cloudimage-360-view 1.1.0 + yall.js 3.1.1
<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.yall.min.js"></script>
CDN link to js-cloudimage-360-view 1.1.0 + lozad.js 1.9.0
<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.lozad.min.js"></script>
Tested in all modern browsers and IE 11, 10, 9.
All contributions are super welcome!
JS Cloudimage 360 View is provided under the MIT License
FAQs
[![Release](https://img.shields.io/github/v/release/scaleflex/js-cloudimage-360-view)](https://github.com/scaleflex/js-cloudimage-360-view/releases) [![Size](https://img.shields.io/bundlephobia/min/js-cloudimage-360-view)](https://img.shields.io/bundlepho
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 3 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
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).