@frybynite/image-cloud 0.2.8 → 0.3.0
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 +15 -31
- package/dist/image-cloud-auto-init.js +808 -788
- package/dist/image-cloud-auto-init.js.map +1 -1
- package/dist/image-cloud.js +624 -603
- package/dist/image-cloud.js.map +1 -1
- package/dist/image-cloud.umd.js +3 -3
- package/dist/image-cloud.umd.js.map +1 -1
- package/dist/index.d.ts +62 -34
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# Image Cloud Library
|
|
4
4
|
|
|
5
|
-
A TypeScript library for creating interactive image clouds with animated scattered layouts and zoom effects. Supports multiple image sources (
|
|
5
|
+
A TypeScript library for creating interactive image clouds with animated scattered layouts and zoom effects. Supports multiple image sources (static URLs, JSON endpoints, Google Drive) and layout algorithms.
|
|
6
6
|
|
|
7
7
|
> [!WARNING]
|
|
8
8
|
> ⚠️ All minor versions of this library before 1.0 (e.g., 0.1, 0.2, ...) will include breaking changes during development. Please re-test every time before upgrading until we have published v1.0.
|
|
@@ -15,7 +15,7 @@ A TypeScript library for creating interactive image clouds with animated scatter
|
|
|
15
15
|
- 🔍 Zoom/focus interactions with keyboard navigation
|
|
16
16
|
- 🎨 State-based image styling (borders, shadows, filters for default/hover/focused)
|
|
17
17
|
- 📱 Responsive design with adaptive sizing
|
|
18
|
-
- 🖼️ Multiple image sources (
|
|
18
|
+
- 🖼️ Multiple image sources (static URLs, JSON endpoints, Google Drive, composite loaders)
|
|
19
19
|
- 🛠️ Interactive configurator for visual configuration
|
|
20
20
|
- 📦 Zero runtime dependencies
|
|
21
21
|
- 🔷 Full TypeScript support
|
|
@@ -58,21 +58,11 @@ import '@frybynite/image-cloud/style.css';
|
|
|
58
58
|
|
|
59
59
|
const cloud = new ImageCloud({
|
|
60
60
|
container: 'myCloud',
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
type: 'urls',
|
|
67
|
-
urls: [
|
|
68
|
-
'https://images.pexels.com/photos/1261728/pexels-photo-1261728.jpeg?auto=compress&w=600',
|
|
69
|
-
'https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg?auto=compress&w=600',
|
|
70
|
-
'https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&w=600'
|
|
71
|
-
]
|
|
72
|
-
}
|
|
73
|
-
]
|
|
74
|
-
}
|
|
75
|
-
},
|
|
61
|
+
images: [
|
|
62
|
+
'https://images.pexels.com/photos/1261728/pexels-photo-1261728.jpeg?auto=compress&w=600',
|
|
63
|
+
'https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg?auto=compress&w=600',
|
|
64
|
+
'https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&w=600'
|
|
65
|
+
],
|
|
76
66
|
layout: {
|
|
77
67
|
algorithm: 'radial'
|
|
78
68
|
}
|
|
@@ -92,19 +82,11 @@ await cloud.init();
|
|
|
92
82
|
style="width: 100%; height: 100vh"
|
|
93
83
|
data-image-cloud
|
|
94
84
|
data-config='{
|
|
95
|
-
"
|
|
96
|
-
"
|
|
97
|
-
"
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
"urls": [
|
|
101
|
-
"https://images.pexels.com/photos/1261728/pexels-photo-1261728.jpeg?auto=compress&w=600",
|
|
102
|
-
"https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg?auto=compress&w=600",
|
|
103
|
-
"https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&w=600"
|
|
104
|
-
]
|
|
105
|
-
}]
|
|
106
|
-
}
|
|
107
|
-
},
|
|
85
|
+
"images": [
|
|
86
|
+
"https://images.pexels.com/photos/1261728/pexels-photo-1261728.jpeg?auto=compress&w=600",
|
|
87
|
+
"https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg?auto=compress&w=600",
|
|
88
|
+
"https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&w=600"
|
|
89
|
+
],
|
|
108
90
|
"layout": {
|
|
109
91
|
"algorithm": "radial"
|
|
110
92
|
}
|
|
@@ -121,7 +103,7 @@ await cloud.init();
|
|
|
121
103
|
|
|
122
104
|
For detailed configuration, see the documentation in the `docs/` folder:
|
|
123
105
|
|
|
124
|
-
1. **[Loaders](docs/LOADERS.md)** — Configure image sources (static URLs, local paths, Google Drive folders)
|
|
106
|
+
1. **[Loaders](docs/LOADERS.md)** — Configure image sources (static URLs, JSON endpoints, local paths, Google Drive folders)
|
|
125
107
|
2. **[Layout Generators](docs/GENERATORS.md)** — Choose and customize layout algorithms (radial, grid, spiral, cluster, random)
|
|
126
108
|
3. **[Image Sizing](docs/IMAGE_SIZING.md)** — Control base sizes, variance, and responsive/adaptive behavior
|
|
127
109
|
4. **[Full Parameter Reference](docs/PARAMETERS.md)** — Complete configuration options for animation, interaction, styling, and more
|
|
@@ -169,6 +151,8 @@ Check out the `examples/` directory for various usage patterns:
|
|
|
169
151
|
- `cdn-umd-example.html` - Traditional script tag / CDN usage
|
|
170
152
|
- `auto-init-example.html` - HTML data attribute initialization
|
|
171
153
|
- `static-loader-example.html` - Static image URLs
|
|
154
|
+
- `static-urls-shorthand-example.html` - Simplest static loader: direct URL array shorthand
|
|
155
|
+
- `static-json-source-example.html` - Load images from a JSON endpoint
|
|
172
156
|
- `google-drive-loader-example.html` - Google Drive folder source
|
|
173
157
|
- `layout-algorithms.html` - Compare all layout algorithms
|
|
174
158
|
- `entry-animations.html` - Entry animation styles
|