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:
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><scriptsrc="https://cdn.scaleflex.it/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>
add
Type: Function
window.CI360.add(idOftheView: string);
lazy init cloudimage-360 view by id.
arguments
idOftheView: string The id of the new view
update
Type: Function
window.CI360.update(idOftheView,forceUpdate);
Update cloudimage 360 viewer instance. For any update in source attributes after plugin initialization (e.g. data-folder, data-filename-x, data-amount-y), the plugin will re-init.
Setting the height relative to the container width at any window size.
In the following example, the height should be 1.3 the container width at window size less than or equal to 567px and 2.22 at window size less than or equal to 768px.
Left zero padding on filename. For example: index-zero-base="4" => image index will be "0004"
data-image-list-x (or data-image-list-x)
Type: Array | optional
Option to add list of images in x-oriantation instead of folder , filename-x & amount-x.
example:
data-image-list-y (or data-image-list-y)
Type: Array | optional
Option to add list of images in y-oriantation instead of folder , filename-y & amount-y.
example:
data-pointer-zoom (or pointer-zoom)
Type: Number | Default: none | optional
Option to scale images on click on it to provided value.
example:
data-pointer-zoom="3"
data-lazyload (or lazyload)
Type: Bool | Default: false | optional
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
data-lazyload-selector (or lazyload-selector)
Type: String | Default: lazyload | optional
Helper class to apply lazy-loading depending on library you choose, see Lazy loading
Controls
You can add controls by adding elements with the following classes: cloudimage-360-left, cloudimage-360-right, cloudimage-360-top, **cloudimage-360-bottom
Also as we did for the x-axis if we are intializing the view using data-folder and data-filename-y so we need to provide data-amount-y which indicates the number of images on the y-axis. example:
Note: We can initilize the view in x, y axes without providing add data-folder, data-amount-y, data-amount-y. Just we need to provide the data-amount-y
First, we need to set data-hotspots attribute to the view we want to add hotspots or markers on it, to prevent the plugin to init the view without hotspots config. Also we need to set an id attribute, we will need it to link the view with the hotspots config.
Create hotspots configuration
The hotspots config should be an array of objects, each object in the array indicates a single hotspot config. For each item in the array, we need to set the positions (X-coord and Y-coord) of the hotspot at every image index we need to show the hotspot on it. hint: To know the current image index we will need to set data-info="white || black" attribute.
In the previous example, we have only set the Ycoord a single time at the image index 0. So if the coord didn't change there's no need to reset it, it will already take the previous value.
Now we need to set the hotspot variant, we have three types of hotspots (link, popup, and custom), as it will be explained below.
Variant
Link
we need to provide the URL of the link and the link title.
Now we need to make our hotspots responsive to have an accurate positioning in different screens. we have to set initialDimensions property to every hotspot config. which indicates the dimension of the cloudimage-360 view. hint: data-info can be used to get view size.
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.
data-transformation (or transformation)
Type: String | Default: none | optional
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:
Applies Cloudimage filters to your image, e.g. brightness, contrast, greyscale, blur, Sharpen... Multiple filters can be applied, separated by "," (comma). example:
Hi Amr, sorry to post it as an issue - - unfortunately i have no idea of how to use github correctly - and how to get in touch with you directly.
First of all : thanks a lot for your work and that wonderful script for the 360 Productviewer. It is absolutely wonderful - also your ongoing changes - even, if i do not understand half of it.
MY issue as a USER of this is the multi device options.
Any idea how to make it always fit perfectly in mobile / tablet / screen size? I mostly drop into scrollbars or in tiny images and large white areas :(
It would be great, to talk to you - or to get feedback. You can also write a mail to me, if you want to just take the info at flow-motion dot eu
thanks again for the script you already did.
Take care
I've got a slew of images naming convention of 'filename-01-01.jpeg' so I'm running into trouble displaying them as they have a column and a row number, not just one as required for this app. Short from renaming every file and forgetting the Y axis rotation, is there a way to use my files with two numbers instead of one ?
Hello.
I've downloaded the library and im trying to edit the unminified file to add a standard-zoom function.
Actually, i've managed to edit the update function with a doubled size with this command:
t.drawImage(e, '-'+(r/2) , '-'+(a/2) , this.canvas.width * 2, this.canvas.height * 2)
My problem is that i need to add an eventlistener onclick, so i can activate my custom zoom function when you just click on the main image.
How can i add that? I've seen the whole code but im not too expert in JS and i don't understand how can i add my custom listener to the library.
Hi, the getActiveIndexByID (https://github.com/scaleflex/js-cloudimage-360-view#getactiveindexbyid) function is not working for me. It always return 'undefined'. window.CI360._viewers array is empty.
Are there any examples? To which event bind it? Are there any hotspots planned in the future?
Hi @dzmitry-stramavus, thanks for the great work!
I've noticed this warning on the console and I think it is caused by this event listener.
In addition this kind of optimization should be necessary only on touchstart and touchmove but not in touchend. It could also be useful to apply a passive listener only if supported. Something like:
Good day!
Thanks for a cool and very useful plugin!
Is there an easy way to customize the preloader? There are actually two of them. The stripe at the top and the percents counter in the middle. I need to turn off the upper stripe/progress bar thing or move it to the bottom and change its color. Is that possible?
I tried to setup a 360 degree view with this plugin and have the following
40 images around 40kb each
All images hosted on a S3 bucket
But some of the images are not pulled in with the 429 Too Many Requests response. I have similar behavior when the images are hosted on another of my web servers. Is there a good way to handle this by
a) Adding small delay between image requests
b) Raise requests for missing images again ?
I understand the response is coming from S3 for requesting too many images too soon, I am looking for a decent way of handling cases like this.
Any suggestions / help on this matter would be greatly appreciated.
Have you tried to rotate from the mobile phone?
The experience sucks, because a single tap = zoom whereas the expectation is for double tap to zoom
Also the pinch and zoom doesen't work at all
The vertical scroll (tap) doesn't work either even though only horizontal 360 are allowed
Please implement one, so after the user clicked on the image, they can click on play to resume the play otherwise they can only play if they reload the page
Also another parameter to control wether the original images (max resolution that is) are loaded from the first time and hence should not be loaded later again
If a viewer with data-lazyload (or lazyload) set is not yet loaded and it's updated instead by calling window.CI360.update("tw-360-1"), this causes to add a 360 icon to it, which then gets added again after it loads causing a duplicate icon, and the second one does not get deleted.
I believe this is caused by
https://github.com/scaleflex/js-cloudimage-360-view/blob/65f08fdb07f841b38821a430436ea0c113977f8e/src/ci360.service.js#L1072
which in turn creates the icon here
https://github.com/scaleflex/js-cloudimage-360-view/blob/65f08fdb07f841b38821a430436ea0c113977f8e/src/ci360.service.js#L1333-L1344
This could be easily solved by checking isReady() before updating:
https://github.com/scaleflex/js-cloudimage-360-view/blob/65f08fdb07f841b38821a430436ea0c113977f8e/src/ci360.service.js#L85-L92
A Virtual Interactive Keyboard which replicates every key you press and a Text-Area in which everything is written and can be copied to the clipboard with a click of a button.
Welcome to Space Traveler's HUB, this web app allows the user to take a fictional tour across the space. The user can choose a rocket from our catalog interface, and reserve it. Also, the user can see recent special missions and join them. Finally, the user will be able to keep track of all your rockets and mission they are subscribed to. Build with React, Redux, React-router, and Railwindcss.