Gallery

by eanders

HTML

<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<body>
    <div class="gallery">
        <div class="filter">
            <select name="photoset" class="photoset"><option value="">Loading . . . </option></select>
            <ol class="years"></ol>
        </div>
        <div class="photos">
        </div>
    </div>
</body>

CSS

.medium {
    width: 300px;
    height: 300px;
    overflow: hidden;
}

JavaScript

// Todo: 
// make year links work
// add paging support
// use url to remember location
// setup flexbox
// convert to jquery plugin

// Base URI for Web service  
var base_uri = 'http://query.yahooapis.com/v1/public/yql?format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&q='; 
var api_key = '76025c0d3719f9cab4bb99d3d330b64c';
var user_id = '64072092@N04';
// Create a variable to make results available  
// in the global namespace  
var results = '';  
// here's how we'd get our user id
//select * from flickr.getidfromusername where username="marlborocollege"
var photosPerPage = 23;
var sizes = {'small':'q','medium':''};
var medium = [3,6,12,23];
$(function() {
    init = function() {
        // years to fetch
        var date = new Date();
        var dates = '';
        for(var i = 0; i < 3; i++) {
          var year =  date.getFullYear() - i;
          dates += '<li><a href="' + year + '">' + year + '</a></li>';
        }
        $('.years').html(dates);
        
        // fetch photosets
        var query = "select * from flickr.photosets.getList where user_id='" + user_id + "'"; 
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.src = base_uri + encodeURIComponent(query) + '&callback=updatePhotosets';
        $("head").append(s);
        // attach change handler to photoset list
        $('.gallery').on('change', '.photoset', fetchPhotos);
        // attach click handler to year links
        $('.years').on('click', 'a', function(e) {
            // update data object with year
            fetchPhotos();
        });
    }; // end init
    
    fetchPhotos = function() {
        var photoset = $('.photoset').val();
        var query = '';
        if(photoset) {
            query = "select * from flickr.photosets.photos(" + photosPerPage + ") where api_key='" + api_key + "' and photoset_id='" + photoset + "'";
        }
        else {
            query = "select * from flickr.photos.search(" +...