MooTools

How to use

Javascript:

var myImageLayer = new mooImageLayer({
    resize: true
});

Stylesheet:

.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>

Options

• 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.

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.