Include the script

Include either the minified or non-minified script on the page, usually in the <HEAD> section.

Default code example:

<script type = "text/javascript" src="/path/to/isomosaic_min.js"></script>

Useage Examples

The following examples show how to include an isoMosaic in your page. It basically consists of a container div, with the attribute "isoMosaic" (plus whatever styling you want), that is filled with images. All images will be hidden and the Mosaic will be shown once they have ALL loaded.

Demo 1

Straight out of the box

Not customized in any way.

[isoMosaic] > * {
<div id="grid" isoMosaic style = "position:relative;width:100%;">
    <img src="im1.jpg"/>
    <img src="im2.jpg"/>
    <img src="im3.jpg"/>
    <img src="im4.jpg"/>

ANY number of images. We usually add a style rule so the initial images within the grid are hidden while loading.

Demo 2

Basic Customisation

The isoMosaic attribute is capable of defining 3 variables for our Mosaic, paddingX, paddingY, gutter and Complexity.

<div id="grid2" isoMosaic="40,20,4,1" style = "position:relative;width:100%;">
    <img src="im1.jpg"/>
    <img src="im2.jpg"/>
    <img src="im3.jpg"/>
    <img src="im4.jpg"/>

Here there is a border of 40 pixels left and right, 20 pixels top and bottom, and there is a border of 4 pixels around each Image. We suggest a complexity value between 1 & 8, default is 8, this is with value 1 (Results in many smaller images being used).

Demo 3


The children of the container don't have to be images, DIVs can be used. Their size ratio can be maintained by giving the DIV (or IMG) tag an "isodim" attribute. Like below with the yellow box (it's a DIV), could contain say a video, with an isodim value of "45,45" (a ratio of 1:1).

<div id="grid3" isoMosaic style = "position:relative;width:100%;">
    <img src="ims/thailand/1.jpg"/>
    <img isodim="60,20" src="ims/thailand/2.jpg"/>
    <img src="ims/thailand/3.jpg"/>
    <img src="ims/thailand/4.jpg"/>
    <img src="ims/thailand/5.jpg"/>
    <div isodim="45,45" style="background:#FFDC2E;"></div>
    <img src="ims/thailand/6.jpg"/>
    <img src="ims/thailand/7.jpg"/>
    <img src="ims/thailand/8.jpg"/>
    <img src="ims/thailand/9.jpg"/>
    <img src="ims/thailand/10.jpg"/>

Amongst the images within the container is a DIV, with an attribute of isodim, background is yellow, it's isodim value is "45,45", it's size within the grid will ALWAYS maintain a 1:1 size ratio. This isodim can added to any of the children of the container, it is added also here to the image of the woman doing yoga ("60,20", 3:1), and the final image is distorted within the grid.

Demo 4


Each child of the container is usually an image element, with it's own src attribute. The entire grid is not shown until ALL these images have been loaded. If we wanted to ensure the grid was not shown until images other than those in the src tags were loaded (say there were DIVs inside the grid that had images within them, then we could define a list of images in an isosrc tag, and the images queued for loading would include those images aswell, before the grid was shown.

<div id="grid3" isoMosaic style = "position:relative;width:100%;">
    <img src="ims/sky/1.jpg"/>
    <img src="ims/sky/2.jpg"/>
    <img src="ims/sky/3.jpg"/>
    <img src="ims/sky/4.jpg"/>
    <img src="ims/sky/5.jpg"/>
    <img src="ims/sky/6.jpg"/>
    <img src="ims/sky/7.jpg"/>
    <img src="ims/sky/8.jpg"/>
    <img src="ims/sky/9.jpg"/>
    <img isosrc="ims/sky/10.jpg,ims/sky/11.jpg,ims/sky/12.jpg,ims/sky/13.jpg" src="ims/sky/10.jpg"/>

Here images 11-13 are loaded aswell as those in the container before the grid. Notice that when isosrc is defined, ims/sky/10.jpg is repeated in isosrc, as the src tag associated with the image in this case will be overidden by the isosrc attribute. In this example this serves no real purpose, but if the container included DIVs with images within them (say background images), it would be useful to not show the grid until they had loaded.


You don't really need any methods for isoMosaic, it is run when the page loads, and re-run everytime the page is resized, which for most situations should be enough. If you want greater control, it can be controlled by javascript, you can even just edit the source code to suit.

There is only 1 method in isoMosaic, thats the isoMosaic call itself, which can be called with one optional argument.


Redraws ALL isoMosaics on the current page.

var grid=document.getElementById('grid');

Redraws ONLY isoMosaic with id "grid" on the current page.


If you have any questions email me.