js-cloudimage-360-view 4.0.0-beta.2 → 4.0.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/js-cloudimage-360-view.min.css +1 -0
- package/dist/js-cloudimage-360-view.min.js +2111 -0
- package/js-cloudimage-360-view-4.0.0-beta.3.tgz +0 -0
- package/package.json +5 -9
- package/vite-npm.config.js +12 -0
- package/dist/assets/index-49ZK8EAw.js +0 -9
- package/dist/assets/index-CgRAm56E.css +0 -1
- package/dist/index.html +0 -697
- package/js-cloudimage-360-view-4.0.0-beta.1.tgz +0 -0
package/README.md
CHANGED
|
@@ -93,8 +93,8 @@ You can install `js-cloudimage-360-view` using one of the following methods:
|
|
|
93
93
|
Include the CDN link to the `js-cloudimage-360-view` library at the end of your `<body>` tag. Additionally, make sure to include the corresponding CSS file for proper styling:
|
|
94
94
|
|
|
95
95
|
```html
|
|
96
|
-
<link rel="stylesheet" href="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/latest/js-cloudimage-360-view.css">
|
|
97
|
-
<script src="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/latest/js-cloudimage-360-view.js?func=proxy"></script>
|
|
96
|
+
<link rel="stylesheet" href="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/latest/js-cloudimage-360-view.min.css">
|
|
97
|
+
<script src="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/latest/js-cloudimage-360-view.min.js?func=proxy"></script>
|
|
98
98
|
```
|
|
99
99
|
|
|
100
100
|
### Note:
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.cloudimage-360{width:100%;position:relative}.cloudimage-360-inner-box{width:100%;height:100%;position:relative}.cloudimage-360-icons-container{position:absolute;display:flex;top:15px;right:10px;height:100%;flex-direction:column;align-items:center;z-index:100;gap:8px}.cloudimage-360-transition-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff;opacity:0;transition:all 1s ease-out;z-index:10}.cloudimage-360-button{width:30px;height:30px;cursor:pointer;transition:transform .15s ease-out,background-color .15s ease-out;display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:#f0f0f0;color:#4a4a4a;box-shadow:0 2px 4px #0000001a;padding:6px}.cloudimage-360-button:hover{transform:scale(1.05);background-color:#e7e6e6}.cloudimage-360-button svg{width:18px;height:18px;fill:#4a4a4a;transition:fill .15s ease-out}.cloudimage-360-button:hover svg{fill:#2c2c2c}.cloudimage-initial-icon{position:absolute;top:0;bottom:0;left:0;right:0;width:100px;height:100px;margin:auto;background:linear-gradient(135deg,#ffffff80,#c8c8c880);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:50%;border:1px solid rgba(255,255,255,.5);box-shadow:0 8px 12px #0003,0 4px 6px #0000001a;transition:.2s all,transform .2s;color:#4b4b4b;text-align:center;z-index:2;line-height:100px;-webkit-user-select:none;user-select:none}.cloudimage-initial-icon:hover{background-color:#c8c8c833}.cloudimage-loading-spinner{width:30px;height:30px;transform:translate(-50%,-50%);border:3px solid #fff;position:absolute;top:15px;left:15px;border-bottom-color:#a3a3a3;border-radius:50%;display:inline-block;box-sizing:border-box;opacity:0;animation:rotation .7s linear infinite}.cloudimage-360-view-360-circle{position:absolute;left:0;bottom:0;width:100%;height:auto;margin:auto;pointer-events:none;-webkit-user-select:none;user-select:none;transition:.2s all;z-index:2}.cloudimage-360-fullscreen-modal{position:fixed;top:0;bottom:0;left:0;right:0;width:100%;height:100%;z-index:999;background-color:#fff}.cloudimage-360-img-magnifier-glass{background-color:#fff;background-image:radial-gradient(circle at center,#fffc,#f0f0f0e6);background-repeat:no-repeat;position:absolute;border:2px solid rgba(0,0,0,.3);border-radius:50%;line-height:200px;text-align:center;z-index:1000;width:250px;height:250px;top:-75px;right:-85px;box-shadow:0 8px 16px #0006,0 4px 8px #0003;transition:box-shadow .2s ease;overflow:hidden;pointer-events:none}.cloudimage-360-hotspot-container{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:20}.cloudimage-360-popper{opacity:1;transition:opacity .2s ease-in-out}.cloudimage-360-hotspot{display:inline-block;position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-50%,-50%);background:#0af;border:1px solid #fff;border-radius:50%;height:18px;width:18px;box-shadow:0 0 #0af9,0 2px 6px #0003;opacity:0;animation:pulse 2s infinite;transition:transform .2s ease,box-shadow .2s ease}.cloudimage-360-hotspot.visible{opacity:1}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 #0af9,0 0 0 10px #0af6,0 0 0 20px #0af3}50%{transform:scale(1.1);box-shadow:0 0 0 10px #0af0,0 0 0 20px #00aaff1a,0 0 0 30px #0af0}to{transform:scale(1);box-shadow:0 0 #0af0,0 0 0 10px #0af0,0 0 0 20px #0af0}}.cloudimage-360-hotspot:hover{transform:scale(1.2);box-shadow:0 0 0 5px #00aaff80,0 4px 12px #0000004d}.cloudimage-360-popper{background-color:#ffffffe6;color:#333;padding:10px 15px;border-radius:6px;box-shadow:0 4px 16px #0003;font-size:14px;max-width:220px;z-index:9999;text-align:center;transition:opacity .2s ease,translate .2s ease;opacity:0;translate:0 -10px}.cloudimage-360-popper[data-show]{opacity:1;translate:0}
|