Mosaic Gallery Docs

Contents:
  1. Installation
  2. Sample usage
  3. API
    1. init(config)
    2. select(index)
    3. showNext()
    4. showPrevious()

Installation

This component requires jQuery so you have to take care this is loaded in the document you are using the Mosaic Gallery. Also its style file and the actual script have to be loaded.

Sample usage

$(document).ready( function() { var m = new Mozaic(); m.init( { images:[ "http://farm6.static....06f863dcf8_z.jpg", "http://farm6.static...7b9fb3084e_z.jpg", "http://farm6.static...2baa9bf9ef_z.jpg", "http://farm6.static....f522923585_z.jpg", "http://farm6.static....babe6b2af0_z.jpg", "http://farm6.static....499981e27e_z.jpg", "http://farm6.static....9f18735f08_z.jpg" ], autoPlay:true, showNavigator:true, id:'mozaic', tileWidth:210, tileHeight:135, tileCountX:3, tileCountY:3 } ); } );

API

Methods

.init( config )

initialize the component
		m.init( {
		images:[
			"http://farm6.static....06f863dcf8_z.jpg",
			"http://farm6.static...7b9fb3084e_z.jpg",
			"http://farm6.static...2baa9bf9ef_z.jpg",
			"http://farm6.static....f522923585_z.jpg",
			"http://farm6.static....babe6b2af0_z.jpg", 
			"http://farm6.static....499981e27e_z.jpg", 
			"http://farm6.static....9f18735f08_z.jpg" 
		],
        autoPlay:true,
        showNavigator:true,
        id:'mozaic',
        tileWidth:210,
        tileHeight:135,
        tileCountX:3,
        tileCountY:3
		}
        );
          

.select( index )

show image on the index

.showNext()

if not busy will show the next image in the list

.showPrevious()

if not busy will show the previous image in the list