Photo gallery

by dhchow

HTML

<div id="gallery" class="">
    <div>
        
        <div id="large-view" class="photo-view center">
            <img id="current-pic" class="large" src="http://farm2.static.flickr.com/1032/1246988398_f403e7029e_m.jpg"/>
        </div>
        <div id="prev" class="navigation left">prev</div>
        <div id="next" class="navigation right">next</div>
        
    </div>
    <div id="thumb-view" class="photo-view">
        <img class="thumb highlight" src="http://farm2.static.flickr.com/1032/1246988398_f403e7029e_m.jpg"/>
        <img class="thumb" src="http://farm4.static.flickr.com/3186/2569831822_acd5410804_m.jpg"/>
        <img class="thumb" src="http://farm1.static.flickr.com/27/103152771_9810d30959_m.jpg"/>
        <img class="thumb" src="http://farm1.static.flickr.com/141/361701281_33c2107439_m.jpg"/>
        <img class="thumb" src="http://farm1.static.flickr.com/21/25305998_94aec0f5f6_m.jpg"/>
        <img class="thumb" src="http://farm4.static.flickr.com/3132/2484430071_86caa9260e_m.jpg"/>
        <img class="thumb" src="http://farm1.static.flickr.com/199/476514422_0c1424fb06_m.jpg"/>
        <img class="thumb" src="http://farm4.static.flickr.com/3186/2569831822_acd5410804_m.jpg"/>
        <img class="thumb" src="http://farm1.static.flickr.com/27/103152771_9810d30959_m.jpg"/>
        <img class="thumb" src="http://farm1.static.flickr.com/141/361701281_33c2107439_m.jpg"/>
        <img class="thumb" src="http://farm1.static.flickr.com/21/25305998_94aec0f5f6_m.jpg"/>
        <img class="thumb" src="http://farm4.static.flickr.com/3132/2484430071_86caa9260e_m.jpg"/>
        <img class="thumb" src="http://farm1.static.flickr.com/199/476514422_0c1424fb06_m.jpg"/>
        <img class="thumb" src="http://farm4.static.flickr.com/3186/2569831822_acd5410804_m.jpg"/>
        <img class="thumb" src="http://farm1.static.flickr.com/27/103152771_9810d30959_m.jpg"/>
        <img class="thumb" src="http://farm1.static.flickr.com/141/361701281_33c2107439_m.jpg"/>
       ...

CSS

body {
    background-color: black;
}
#gallery {
    width: 700px;
}

#large-view {
    padding: 20px;
}

#thumb-view {
    
}

img.large {
    height: 400px;
    -moz-box-shadow: 10px 10px 5px #999;
    -webkit-box-shadow: 10px 10px 5px #999;
    box-shadow: 10px 10px 5px #999;
}

img.thumb {
    height: 50px;
}

img.thumb:hover {
    opacity: 0.5;
}

.photo-view {
    text-align: center;
}

.highlight {
    border:3px solid snow;
}

#prev, #next {
    /*position: relative;*/
}

#prev {
    
}

.left {
    float: left;
}

.right {
    float: right;
}

.navigation {
    /*margin-top: 200px;*/
    padding: 50px;
}

JavaScript

/*
Flickr API key: f7a2203c3afa8a2e28c83dfd5c9f4dbe
*/

jsonFlickrApi = function(response) {
    console.log(response);
}

$(function() {
    $.getJSON("http://api.flickr.com/services/rest?callback=?", {
        method: "flickr.photos.search",
        api_key: "f7a2203c3afa8a2e28c83dfd5c9f4dbe",
        user_id: "20414346@N00",
        format: "json"
    });

    $("#thumb-view").delegate(".thumb", "click", function() {
        $(".thumb").removeClass("highlight");
        $(this).addClass("highlight");
        $("#current-pic").attr("src", $(this).attr("src"));
    });
});



/**
 element (HTMLElement) container for the gallery
 photos (Array) list of photo URLs
 */
var PhotoGallery = function(element, photos) {
    element = $(element);

    var init = function() {

    }

    init();
}