ElementStacks

by dandiebolt

HTML

<script src="https://github.com/marcofucci/ElementStack/raw/master/src/ElementStack.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<div id="wrapper"></div>

CSS

body {
    background-color: #000;
    font-family: "Georgia", "Times New Roman", serif;
    font-size: .8em;
    color: #fff;
    text-align: center;
    text-shadow: 0 -1px 0 #000;
}

h1 {
    font-size: 1.7em;
    line-height: 150%;
}

#wrapper {
    position: relative;
    height: 320px;
    width: 280px;
    margin: 15px auto;
}

img {
    position: relative;
    float: left;
    padding: 0;
    margin: 5px;
    -webkit-box-shadow: 0 0 5px #000;
    -moz-box-shadow: 0 0 5px #000;
    border: solid 2px #FFFAF2;
    border-bottom: solid 15px #FFFAF2;
    -webkit-transition: -webkit-transform 0.20s ease-in-out;
    -moz-transition: -moz-transform 0.20s ease-in-out;
}

a {
    color: #FFFFFF
}

JavaScript

var url="http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fsunlightfoundation.com%2Fpeople%2F%22%20and%0A%20%20%20%20%20%20xpath%3D'%2F%2Fimg%5Bstarts-with(%40src%2C%22http%3A%2F%2Fassets.sunlightfoundation.com%2Fimages%2Fblog%2Favatars%2F100%22)%5D'&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";

$.ajax({
    url: url,
    dataType: 'jsonp',
    success: function(data) {
        var images = data.query.results.img;
        $.each(images, function(index, image) {
            console.log(image.src);
            $("#wrapper").append("<img src='" + image.src+ "'/>");
        });
        //Usage
        $('#wrapper').elementStacks({
            'transaction': 'easeOutBack',
            'initialCollapse': true
        });
    }
});


// YQL Query:
// SELECT * 
// FROM html 
// WHERE url="http://sunlightfoundation.com/people/"
// AND xpath='//img[starts-with(@src,"http://assets.sunlightfoundation.com/images/blog/avatars/100")]'

// YQL Console Permalink
//   http://developer.yahoo.com/yql/console/?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fsunlightfoundation.com%2Fpeople%2F%22%20and%0A%20%20%20%20%20%20xpath%3D%27%2F%2Fimg%5Bstarts-with(%40src%2C%22http%3A%2F%2Fassets.sunlightfoundation.com%2Fimages%2Fblog%2Favatars%2F100%22)%5D%27&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys

// YQL Query Link (JSON)
//   http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fsunlightfoundation.com%2Fpeople%2F%22%20and%0A%20%20%20%20%20%20xpath%3D'%2F%2Fimg%5Bstarts-with(%40src%2C%22http%3A%2F%2Fassets.sunlightfoundation.com%2Fimages%2Fblog%2Favatars%2F100%22)%5D'&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=cbfunc