You are viewing this site over HTTP, which is not secure. Please consider switching to HTTPS instead.

jQuery Mosaic Demo

Powered by our jQuery Mosaic Plugin!

Configuration

Effect:
Options (only for jQuery UI effects):
Duration in milliseconds:
Interval in milliseconds:
Easing:
Number of swaps:
Image width in pixels:
(Note: this has nothing to do with the plugin, just the way this demo page is rendered)

The mosaic

The source

The source code of the mosaic is:

<div
  data-mosaic
  data-mosaic-effect="fade" data-mosaic-options='"pieces": 16'
  data-mosaic-swaps="1"
  data-mosaic-duration="1500"
  data-mosaic-interval="2000"
  data-mosaic-easing="swing"
>
  <img width="200" src="..." alt="" style="float: left" />
  <img width="200" src="..." alt="" style="float: left" />
  ...
<div>

In this demo all images are floated left, but that's arbitrary - they can be layed out in any way you like.