A simple image layer plugin for mootools
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
Source
README.md
package.yml

README.md

Mootools Image Layer

A small and (hopefully) fast inline image loader.

How to use

Javascript:

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

Stylesheet:

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