Default styles for InteractiveThumbnailGridView:

.s7interactivethumbnailgridview {
	background-color:rgba(100, 100, 100, 0.2);
	position:absolute;
	user-select:none;
	-ms-user-select:none;
	-moz-user-select:-moz-none;
	-webkit-user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	width:500px;
	height:250px;
 }
.s7interactivethumbnailgridview .s7thumbcell {
	margin:5px;
 }
.s7interactivethumbnailgridview .s7thumb {
	border:1px solid transparent;
	width:75px;
	height:75px;
 }
.s7interactivethumbnailgridview .s7thumb[state='selected'] {
	border:1px solid #FFFFFF;
 }
.s7interactivethumbnailgridview .s7label {
	font-family:Helvetica, sans-serif;
	font-size:12px;
 }
.s7interactivethumbnailgridview .s7scrollbar {
	background-color:rgba(100, 100, 100, 0.2);
	position:absolute;
	top:0px;
	bottom:0px;
	right:0px;
	width:22px;
 }
.s7interactivethumbnailgridview .s7scrollbar .s7scrollthumb {
	width:20px;
	position:absolute;
	backgroundRepeat:no-repeat;
	backgroundPosition:center;
	height:30px;
 }
.s7interactivethumbnailgridview .s7scrollbar .s7scrollthumb[state='up'] {
	background-image:url(images/sdk/scrollbar_thumb_up.png);
 }
.s7interactivethumbnailgridview .s7scrollbar .s7scrollthumb[state='over'] {
	background-image:url(images/sdk/scrollbar_thumb_over.png);
 }
.s7interactivethumbnailgridview .s7scrollbar .s7scrollthumb[state='down'] {
	background-image:url(images/sdk/scrollbar_thumb_down.png);
 }
.s7interactivethumbnailgridview .s7scrollbar .s7scrollthumb[state='disabled'] {
	background-image:url(images/sdk/scrollbar_thumb_disabled.png);
 }
.s7interactivethumbnailgridview .s7scrollbar .s7scrolltrack {
	width:20px;
	background-color:#cbcbcb;
 }
.s7interactivethumbnailgridview .s7scrollbar .s7scrollupbutton {
	display:block;
	width:20px;
	height:20px;
 }
.s7interactivethumbnailgridview .s7scrollbar .s7scrollupbutton[state='up'] {
	background-image:url(images/sdk/scroll_up_up.png);
 }
.s7interactivethumbnailgridview .s7scrollbar .s7scrollupbutton[state='over'] {
	background-image:url(images/sdk/scroll_up_over.png);
 }
.s7interactivethumbnailgridview .s7scrollbar .s7scrollupbutton[state='down'] {
	background-image:url(images/sdk/scroll_up_down.png);
 }
.s7interactivethumbnailgridview .s7scrollbar .s7scrollupbutton[state='disabled'] {
	background-image:url(images/sdk/scroll_up_disabled.png);
 }
.s7interactivethumbnailgridview .s7scrollbar .s7scrolldownbutton {
	display:block;
	width:20px;
	height:20px;
 }
.s7interactivethumbnailgridview .s7scrollbar .s7scrolldownbutton[state='up'] {
	background-image:url(images/sdk/scroll_down_up.png);
 }
.s7interactivethumbnailgridview .s7scrollbar .s7scrolldownbutton[state='over'] {
	background-image:url(images/sdk/scroll_down_over.png);
 }
.s7interactivethumbnailgridview .s7scrollbar .s7scrolldownbutton[state='down'] {
	background-image:url(images/sdk/scroll_down_down.png);
 }
.s7interactivethumbnailgridview .s7scrollbar .s7scrolldownbutton[state='disabled'] {
	background-image:url(images/sdk/scroll_down_disabled.png);
 }
.s7tooltip {
	position:absolute;
	padding:5px;
	line-height:100%;
	text-align:center;
	background-color:rgb(224, 224, 224);
	color:rgb(26,26,26);
	font-family:Helvetica, sans-serif;
	font-size:11px;
	z-index:10000;
	border:1px solid rgb(191,191,191);
 }


The code below does the following:

The Scene7 HTML5 SDK is linked to the page and the required s7sdk components are included in the document head.
CSS Styles are defined in the document head to control the appearance of the SDK components.
The s7sdk.Util.init() method is called to initialize the SDK.
A ParameterManager object is created to handle component modifiers for the viewer.
An initViewer() function is defined. This function initializes a couple of modifiers (hard coded for example purposes),
then creates the component objects required for this simple example. The initViewer() function also adds event listeners
that designate functions to handle relevant component events (which might be dispatched by the components as a result of
user interactions, changes in a component's state, etc.).
Handler functions are defined to respond to the component event listeners added in the initViewer() function.
An event listener is added to the ParameterManager object that designates the initViewer() function as the handler
to call when the Scene7 SDK is loaded and ready.
Finally, the init() method is called on the ParameterManager object to start the viewer.

{zoom/examples/InteractiveThumbnailGridView.html}

Parameters:

{String|Container} container

The reference to Container instance or the ID of the parent DOM element to which the component is added as a child

{s7sdk.ParameterManager} settings

A parameter manager instance that represents the desired configuration.

{String} compId

An optional parameter that specifies the ID of the component DOM element.

See:

s7sdk.SwatchDesc

s7sdk.ParameterManager

s7sdk.set.MediaSet