Image-links Slideshow (sample Widget)

In this guide, we will build a slideshow widget that plays a slideshow from the provided list of image links.

The widget’s HTML code

Here is the zip with the required code:

widget.zip

The widget’s json schema

We need the declare a schema for the required configuration fields:

  1. scale: a select field to choose the image fitting (fit, crop, stretch).
  2. animation: the animation of the image while appearing (none, slide, fadein) (animation is heavy on the CPU and work properly only when the show region has no transparency and is layered behind other layers with transparency or video).
  3. bgcolor: a color picker field that defines the widget’s background color.
  4. images: a list field with the image links and their duration.
    1. duration: a spinner (number) field for the duration of the image in seconds.
    2. url: the image link.

slideshow schema.jsonExpand source

{
  "fields": [
    "scale",
    "animation",
    "bgcolor",
    "images"
  ],
  "data": {
    "bgcolor": "ffffff00",
    "animation": "none",
    "scale": "fit"
  },
  "schema": {
    "images": {
      "type": "List",
      "itemType": "Object",
      "subSchema": {
        "duration": {
          "type": "Spinner",
          "editorAttrs": {
            "max": 9999,
            "step": 1,
            "min": 1
          },
          "title": "<%=general_duration%>"
        },
        "url": {
          "title": "<%=general_url%>",
          "type": "Text",
          "validators": [
            "required"
          ]
        }
      },
      "title": "<%=general_image_url%>"
    },
    "bgcolor": {
      "type": "SpectrumColorPicker",
      "title": "<%=general_background_color%>"
    },
    "animation": {
      "type": "Select",
      "options": [
        {
          "val": "none",
          "label": "<%=general_none%>"
        },
        {
          "val": "slide",
          "label": "<%=general_slide%>"
        },
        {
          "val": "fade",
          "label": "<%=general_fade%>"
        }
      ],
      "title": "<%=general_animation%>"
    },
    "scale": {
      "type": "Select",
      "options": [
        {
          "val": "fit",
          "label": "<%=general_fit%>"
        },
        {
          "val": "crop",
          "label": "<%=general_crop%>"
        },
        {
          "val": "stretch",
          "label": "<%=general_strech%>"
        }
      ],
      "title": "<%=general_fit_option%>"
    }
  }
}

Widget creation

In the upload widget page we create a new widget, upload the attached zip file and enter the schema given above.

After that we can create slideshow widgets with the desired configuration.

For any questions you may have, reach out and our dev team can help you out.