Can we load external json file with list of images and make a slideshow animation

Saola Animate Support Questions
1

Can we load external json file with list of images with different ids and make a slideshow animation similar like enclosed GIF… 10-30 images can be called from json. Json file with image path might be in similar structure as enclosed.

It to be triggerable by click action, or function call. Ideally we could give each product image an ID, and choose which one to flip to when the function is called/click is registered.

Please let me if it is possible with Saola Animate?

example.zip (3.8 MB)
.

2

Hi Niraj,

Saola Animate supports JavaScript so virtually it can do anything that JavaScript can do.
For your example, please take the following steps:

  1. Load and parse the JSON file (and preload images in that file if needed) in Document Create, or Document Ready, or Scene Activate event.
    You can use XMLHttpRequest or a lib such as jQuery to load the JSON file.
    If you can edit this file, you should use a JavaScript file instead of a JSON file, so that you can load and use it easier with script tag.
  2. Add two dummy images to your project, add an additional timeline to animate these two images. I’m not sure which animations are used in your sample, but I think you can combine Opacity, Transformation, and Blur Filter.
  3. Add script (e.g. to On Click event of a button) to replace two images above by images in your file, and start the timeline. For example:
    doc.getElement('image1').imgDom.style.backgroundImage = 'url(path/to/your/current/image)';
    doc.getElement('image2').imgDom.style.backgroundImage = 'url(path/to/your/next/image)';
    doc.getTimeline('Timeline_1').start();

Regards

3

Actually, I want to load unlimited images directly from json file attached into saola timeline and make a edit using available saola tools like like blur etc and make a slideshow. Please take a look structure of json file above example.zip.

4

I already viewed your JSON file.
If images are hosted on a remote server, you must animate two dummy images and replace them by actual images as I mentioned.
If they’re your images, please import them into Saola Animate then adding animations.

5

Okay, I will check. Thanks