New online demos available.  

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")
  • resetIndexOnUpdate - whether to reset a currently selected item when the list of images is updated. false by default.
  • autoPlay - if non-zero, turns on auto play. The value is a number of milliseconds.
  • arrowButtonsEnabled - turns on/off arrow buttons.

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