< Context / Components

Gallery

Introduction

A gallery of images displayed one at a time with thumbnail buttons below used to change image.

Body

Images

An array of images to include in the gallery

  • src

    -url

    Location of image file

    href

    -url

    Link on the image

    thumbColor

    -Hex color

    Solid block of colour to use as the thumbnail button. Default uses a smaller version of the main image

    thumbImg

    -url

    Sets an image to use as the thumbnail button. Default uses a smaller version of the main image

Tooltip

-Text

Tool tip appears on top of gallery when it’s first loaded to guide users into interactive with it

hasArrows

-Boolean

Determines whether arrows for previous/next image are displayed on the sides of the gallery

loadAnimation

-Boolean

Determines whether the gallery animates through the images before it’s interacted with

Style

Style

Styling on the component container.

Images

Styling on the large images. The same styles are applied to each images as only one is shown at a time.

Thumbnails

Styling for the small thumbnail buttons displayed below the main image.

Thumbnails.hover

Styling for when the user hovers their mouse over one of the thumbnail buttons.

Thumbnails.selected

Styling to highlight the selected thumbnail button.

Tooltip

Styling on the tooltip (if it’s included) that sits on top of the gallery.

galleryArrow

Styling the buttons that select the previous/next image.

galleryArrow.arrow

Styling the arrows inside the buttons that select the previous/next image.

Example

{
  "type":"gallery",
  "body":{
    "id":"test1",
    "images":[
      {
        "src":"https://s3.amazonaws.com/rebelmail-templates/hp/envy-curved/images/version5/gallery1.jpg",
        "href":"http://store.hp.com/us/en/ContentView?storeId=10151&langId=-1&catalogId=10051&eSpotName=Envyaio_34c",
        "value":"",
        "thumbColor":"",
        "thumbImg":""
      },
      {
        "src":"https://s3.amazonaws.com/rebelmail-templates/hp/envy-curved/images/version5/gallery4.jpg",
        "href":"http://store.hp.com/us/en/ContentView?storeId=10151&langId=-1&catalogId=10051&eSpotName=Envyaio_34c",
        "value":"",
        "thumbColor":"",
        "thumbImg":""
      }
    ],
    "tooltip":"Click thumbnails to view gallery",
    "hasArrows":false,
    "loadAnimation":true
  },
  "style":{
    "background":{
      "color":""
    },
    "margin":{
      "top":"",
      "right":"",
      "bottom":"",
      "left":""
    },
    "padding":{
      "top":"",
      "right":"",
      "bottom":"",
      "left":""
    },
    "border":{
      "color": "",
      "width": "",
      "style":"",
      "radius": ""
    },
    "images":{
      "width":"480",
      "height":"320",
      "padding":{
        "top":"",
        "right":"",
        "bottom":"",
        "left":""
      },
      "border":{
        "color": "",
        "width": "",
        "style":"",
        "radius": ""
      },
      "boxShadow": {
        "horizontalOffset": "",
        "verticalOffset": "",
        "blur": "",
        "spread": "",
        "color": ""
      }
    },
    "thumbnails":{
      "width":"64",
      "height":"64",
      "margin":{
        "top":"10",
        "right":"5",
        "bottom":"5",
        "left":"5"
      },
      "border":{
        "color": "#333333",
        "width": "2",
        "style":"solid",
        "radius": ""
      },
      "boxShadow": {
        "horizontalOffset": "",
        "verticalOffset": "",
        "blur": "",
        "spread": "",
        "color": ""
      },
      "hover":{
        "width":"",
        "height":"",
        "margin":{
          "top":"",
          "right":"",
          "bottom":"",
          "left":""
        },
        "border":{
          "color":"",
          "width":"",
          "style":"",
          "radius":""
        },
        "boxShadow": {
          "horizontalOffset": "",
          "verticalOffset": "",
          "blur": "",
          "spread": "",
          "color": ""
        }
      },
      "selected":{
        "width":"",
        "height":"",
        "margin":{
          "top":"",
          "right":"",
          "bottom":"",
          "left":""
        },
        "border":{
          "color": "#f69513",
          "width": "2",
          "style":"solid",
          "radius": ""
        },
        "boxShadow": {
          "horizontalOffset": "",
          "verticalOffset": "",
          "blur": "",
          "spread": "",
          "color": ""
        }
      }
    },
    "tooltip":{
      "width":"300",
      "background":{
        "color":"#f69513"
      },
      "border": {
        "color": "",
        "width": "",
        "style":"",
        "radius": ""
      },
      "padding":{
        "top":"5",
        "right":"5",
        "bottom":"5",
        "left":"5"
      },
      "boxShadow": {
        "horizontalOffset": "",
        "verticalOffset": "",
        "blur": "",
        "spread": "",
        "color": ""
      },
      "font": {
        "color": "#fff",
        "decoration":"",
        "family":"",
        "style":"",
        "weight":"",
        "size": "16",
        "align":"center"
      }
    },
    "galleryArrow":{
      "width":"40",
      "background":{
        "color":""
      },
      "border": {
        "color": "",
        "width": "",
        "style":"",
        "radius": ""
      },
      "arrow":{
        "color":"#f69513",
        "width":"4"
      }
    }
  }
}