A small and (hopefully) fast inline image loader.
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>
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.
blog comments powered by Disqus