Edgecase-jq is a jQuery port of Edgecase.
Elements that scale with the browser window size. Use the Edgecase.Concrete
class to create scaleable elements.
var boxed = new Edgecase.Concrete('#image', {
aspectRatio: 16 / 9,
container: '#box'
});
boxed.setup();
Alternatively, roll your own implementation by using the Edgecase
module as
a mixin.
Widescreen = new JS.Class({
include: Edgecase,
initialize: function(video) {
this.setElement(video.getHTML());
this.setContainer(video.getContainer());
this.setAspectRatio(16 / 9);
}
});
EdgeGallery
is lightweight gallery that fills the viewport, built on
Edgecase
.
var json = {
"images": [
{
"uri": "/images/first.jpg",
"description": "The first image",
"width": 1024,
"height": 768
},
{
"uri": "/images/second.jpg",
"description": "The second image",
"width": 1280,
"height": 960
}
],
"rotate": "auto",
"rotationTime": 5.0,
"animationTime": 0.5
},
gallery = EdgeGallery.fromJSON(json);
gallery.insertInto(document.body);