ImageCarousel

This widget is designed to be used for the approval page. It is similar to StaticImage, but allows displaying multiple images and it has some additional features.

General info

  • type: image-carousel

Params

  • lightbox - set true or false (default) to enable or disable a lightbox (a large preview window opened when you click an image).
  • timestamp - use it to add a timestamp to the image URLs. Set it to true if you have a problem with the image caching.
  • images - an array of the image elements. See below for details.
  • containerColor - an image container color (in CSS format). Use it if your preview images are not looking good on the default background (which may happen if you are displaying images on a mockup).
  • showIndex - set it to true if you want to show a user a number of an image in the list (like 1/5).
  • showImageHeader - set it to true if you want to show a header.
  • imageSelectorPosition - position of image selectors ("left" | "bottom" | "right" | "no")

Image elements

Each element of the images array is described by the following structure:

{
  "title": "Front page",
  "url": "http://example.com/api/rendering/product1.png&w=300&h=300",
  "urlHD": "http://example.com/api/rendering/product1.png&w=1200&h=1200"
}

It is possible to omit urlHD. In this case, the image used in url will be shown on both a thumbnail and a larger image. If you set both urlHD and url, the url will be used only for thumbnail and urlHD - for the large image.

Example

Simple example

{
  "name": "image-carousel",
  "type": "image-carousel",
  "params": {
    "images": [
        {
            "title": "Front Side",
            "url": "http://example.com/some/url/1/front.jpg"
        },
        {
            "title": "Back Side",
            "url": "http://example.com/some/url/1/back.jpg"
        }]
 }
}

Customer's Canvas proof images

Typically, you have several steps. On one step you have a Customer's Canvas and on the next step, you want to show the its proof images.

Here you need to solve two tasks - force Customer's Canvas to generate images when you go to the approval step and hook up the Image Carousel with the Customer's Canvas.

Let's see how it can be done.

{
    "widgets": [
        {
            "name": "cc",
            "type": "canvas",
            "params": {
                // ... Customer's Canvas params are omitted for brevity
            }
        },
        {
            "name": "approval-images",
            "type": "image-carousel",
            "params": {
                "lightbox": true,
                "images": {
                    "{{#each $['cc'].proofImageUrls as img}}": {
                        "url": "{{img[0]}}",
                        "title": "{{'Image ' + (index+1)}}"
                    }
                }
            }
        }
    ],
    "steps":[
        {
            "title": "Editor",
            "mainPanel": { "name": "cc" }
        },
        {
            "title": "Approval",
            "mainPanel": { "name": "approval-images" },
            "onActivate": ["{{#function $['cc'].getProofImages(800,800)}}"]
        }
    ]
}

See also