twitter linkedin

Image load events

In this example you see the image evenst at work. You van use them to create any kind of progressbar or load image.
To save bandwidth I show you how to start the presentation manually

Useful Links

Connect a JQuery zoom plugin

360 Rotation is often used with a zoom function. With this viewer you can use every zoom plugin you find. In this example we skipped the progressbar for you to make the code easy to read. Press 'Start Loading' and wait until it's ready. Now click on the presentation and you see the JQuery plugin CloudZoom at work.

Useful Links

3 Ways to start

There are many ways to start the viewer. In this example you see 3 ways to setup the viewer. Please wait until all 72 images are loaded, we didn't use a loader to keep the code clean.

  • Loading with parameters given directly to the instance. Normal way to startup a single presentation.
  • Loading when the parameters are data elements on the target. Great for webshops or other large collections when parameters can vary.
  • Use a custom datasource. Normally the viewer looks for a patters like "_01,jp". But you can also give an array with imageurls, the viewer skips the pattern and use your array in the order you make it

Autorotate and other animations

There is no better autorotate like this one. You can control all the options. Speed, easing and what to do when your user wants to take over. We use the JQuery easing plugin but there are many more.


Responsive

These days all websites need to be responsive.
The size of the viewer is first determined by the size of the image. But if you put it in a relative div it takes over that size. Check the example on the right.

No JSFiddle this time, just a simple hyperlink to our responsive 360 viewer