GitHub - scaleflex/js-cloudimage-360-view: Engage your customers with a stunning...
source link: https://github.com/scaleflex/js-cloudimage-360-view
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
JS Cloudimage 360 View
Docs • Demo • Code Sandbox • Why
A simple, interactive resource that can be used to provide a virtual tour of your product.
powered by Cloudimage (Watch the video here)
Table of contents
- Demo
- Step 1: Installation
- Step 2: Initialize
- Configuration
- Cloudimage responsive integration
- Lazy loading integration
- Best practices
- Browser support
- Filerobot UI Family
- Contributing
- License
Demo
To see the Cloudimage 360 view plugin in action, please check out the Demo page.
Step 1: Installation
Add script tag with CDN link to js-cloudimage-360-view lib after all content in body tag
<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.min.js"></script>
Step 2: Initialize
After adding the js-cloudimage-360-view lib, simply iniatialize it with class name "cloudimage-360", server folder path, file name and amount of images:
<div class="cloudimage-360" data-folder="https://scaleflex.cloudimg.io/crop/1920x700/n/https://scaleflex.airstore.io/demo/360-car/" data-filename="iris-{index}.jpeg" data-amount="36" ></div>
Config
class
Type: String | Value: "cloudimage-360" | requiredThe selector for js-cloudimage-360-view lib.
data-folder (or folder)
Type: String(url) | requiredYour images folder on server.
data-amount (or amount)
Type: Number | Default: 36 | optionalAmount of images to load for 360 view.
data-keys (or keys)
Type: Bool | Default: false | optionalSupport for 360 spin by pressing arrow keys on keyboard.
data-autoplay (or autoplay)
Type: Bool | Default: false | optionalAutoplay 360 spin view on load.
data-full-screen (or full-screen)
Type: Bool | Default: false | optionalOpen 360 spin view in full screen modal.
data-magnifier (or magnifier)
Type: Number | Default: none | optionalMagnifier to zoom image.
data-ratio (or ratio)
Type: Number (height / width) | Default: none | optionalPrevents page from jumping.
data-autoplay-reverse (or autoplay-reverse)
Type: Bool | Default: false | optionalAutoplay 360 spin view on load.
data-speed (or speed)
Type: Number | Default: 150 | optionalSpeed of changing frames in milliseconds.
data-box-shadow (or box-shadow)
Type: String (e.g. data-box-shadow="inset 0 0 100px #222") | Default: none | optionalApply box shadow for container.
data-bottom-circle (or bottom-circle)
Type: Bool | Default: false | optionalDisplay 360 view line at the bottom of container.
data-bottom-circle-offset (or bottom-circle-offset)
Type: Number | Default: 5 | optionalBottom offset for 360 view line.
data-lazyload (or lazyload)
Type: Bool | Default: false | optionalOnly 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
data-lazyload-selector (or lazyload-selector)
Type: String | Default: lazyload | optionalHelper class to apply lazy-loading depending on library you choose, see Lazy loading
Cloudimage Responsive Integration
See how it works (article on Medium)
Requirements
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.
data-responsive (or responsive)
Type: String (Cloudimage token) | Default: none | required for cloudimage responsive pluginEnables cloudimage responsive plugin for 360 view.
data-filters (or filters)
Type: String | Default: q35 | optionalApplies default Cloudimage filters to your image, e.g. fcontrast, fpixelate, fgaussian, backtransparent,
rotation... Multiple filters can be applied, separated by ".
" (dot).
Lazy Loading
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>
Best practices
In order to use cloudimage responsive with 360 view, your original (master) images should be stored on a server or storage bucket (S3, Google Cloud, Azure Blob...) reachable over HTTP or HTTPS by Cloudimage. If you want to upload your master images to Cloudimage, contact us at [email protected].Browser support
Tested in all modern browsers and IE 11, 10, 9.
Filerobot UI Familiy
- JS Cloudimage Responsive
- React Cloudimage Responsive
- Angular Cloudimage Responsive
- Image Editor
- Uploader
Contributing!
All contributions are super welcome!
License
JS Cloudimage 360 View is provided under the MIT License
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK