A simple image layer plugin for mootools
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Mootools Image Layer

A small and (hopefully) fast inline image loader.

How to use


var myImageLayer = new mooImageLayer({
    resize: true


.mil-imagelink img {
    border: 1px solid #808080;
    -moz-box-shadow: 2px 2px 8px #C2C2C2;
    -webkit-box-shadow: 2px 2px 8px #C2C2C2;
    box-shadow: 2px 2px 8px #C2C2C2;

.mil-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #333333;
    opacity: 0.7;
    z-index: 10000;

.mil-bg-loading {
    position: absolute;
    width: 100%;
    color: white;
    font: bold 16px sans-serif;
    text-align: center;
    background-color: black;
    padding: 5px 0px;

.mil-img {
    cursor: pointer;
    position: absolute;
    top: 0;
    z-index: 10001;
    border: 1px solid black;
    -moz-box-shadow: 0px 0px 20px #D9D9D9;
    -webkit-box-shadow: 0px 0px 20px #D9D9D9;
    box-shadow: 0px 0px 20px #D9D9D9;

Links you want to use with mooImageLayer only need the linkselector-class:

<a class="mil-imagelink" href="files/somescreenshot.png">A screenshot</a>


  • linkselector: Default: 'mil-imagelink'. Selector of links to convert.
  • bgclass: Default: 'mil-bg'. Class of the background layer.
  • loadingclass: Default: 'mil-bg-loading'. Class of the loading message.
  • imgclass: Default: 'mil-img'. Class of the image element.
  • sizefactor: Default: 0.95. The maximum dimensions the image will have in relation to the page.
  • resize: Default: false. If true a resize event is added to track page's size changes.
  • autoheight: Default: true. Will adjust height of the background layer to the document. If resize is set to true, height of the layer will be resized with the image.
  • findParent: Default: false. If true tries to find the parent link element. Useful if e.g linkselector points to the thumbnail image instead of the link to the image.