Menu
<!DOCTYPE html>
<html>
<head>
<meta content=”text/html; charset=utf-8″ http-equiv=”Content-Type”>
<title>Flickr Photo Wall – Tutorial by Kyle Rush – kylerush.net</title>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<!– Add jQuery library –>
<script type=”text/javascript” src=”
<!– Add mousewheel plugin (this is optional) –>
<script type=”text/javascript” src=”/fancybox/lib/jquery.mousewheel-3.0.6.pack.js”></script>
<!– Add fancyBox –>
<link rel=”stylesheet” href=”/fancybox/source/jquery.fancybox.css?v=2.1.5″ type=”text/css” media=”screen” />
<script type=”text/javascript” src=”/fancybox/source/jquery.fancybox.pack.js?v=2.1.5″></script>
<!– Optionally add helpers – button, thumbnail and/or media –>
<link rel=”stylesheet” href=”/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5″ type=”text/css” media=”screen” />
<script type=”text/javascript” src=”/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5″></script>
<script type=”text/javascript” src=”/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6″></script>
<link rel=”stylesheet” href=”/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7″ type=”text/css” media=”screen” />
<script type=”text/javascript” src=”/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7″></script>
<link rel=”shortcut icon” href=”
<link rel=”icon” href=”
<link type=”text/css” rel=”stylesheet” media=”all” href=”
<script type=”text/javascript” src=”
<script type=”text/javascript”>
var global_page = 1;
$(function() {
processSearch(global_page);
});
function processSearch(page) {
jQuery(‘#a-link’).remove();
jQuery(‘<img />’).attr(‘id’, ‘loader’).attr(‘src’, ‘http://cdn.kylerush.org/kr/images/flickr-ajax-loader.gif’).appendTo(‘#image-container’);
//assign your api key equal to a variable
var apiKey = ‘4ef2fe2affcdd6e13218f5ddd0e2500d’;
//the initial json request to flickr
//to get your latest public photos, use this request: [url]https://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=[/url]’ + apiKey + ‘&user_id=29096781@N02&per_page=15&page=2&format=json&jsoncallback=?
$.getJSON(‘https://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=’ + apiKey + ‘&photoset_id=72157619415192530&format=json&per_page=10&page=’ + page + ‘&jsoncallback=?’,
function(data){
//loop through the results with the following function
$.each(data.photoset.photo, function(i,item){
//build the url of the photo in order to link to it
var photoURL = ‘http://farm’ + item.farm + ‘.static.flickr.com/’ + item.server + ‘/’ + item.id + ‘_’ + item.secret + ‘_m.jpg’;
//turn the photo id into a variable
var photoID = item.id;
//use another ajax request to get the tags of the image
$.getJSON(‘https://api.flickr.com/services/rest/?&method=flickr.photos.getInfo&api_key=’ + apiKey + ‘&photo_id=’ + photoID + ‘&format=json&jsoncallback=?’,
function(data){
//if the image has tags
if(data.photo.tags.tag != ”) {
//create an empty array to contain all the tags
var tagsArr = [];
//for each tag, run this function
$.each(data.photo.tags.tag, function(j, item){
//push each tag into the empty ‘tagsArr’ created above
tagsArr.push(‘<a href=”http://www.flickr.com/photos/tags/’ + item._content + ‘”>’ + item.raw + ‘</a>’);
});
//turn the tags array into a string variable
var tags = tagsArr.join(‘, ‘);
}
//create an imgCont string variable which will hold all the link location, title, author link, and author name into a text string
var imgCont = ‘<div class=”image-container”><img src=”‘ + photoURL + ‘” style=”width: 100%;” /></div>’;
//append the ‘imgCont’ variable to the document
$(imgCont).appendTo(‘#image-container’);
});
});
});
//assign hover actions to each image
$(‘.image-container’).live(‘mouseover’, function(){
$(this).children(‘div’).attr(‘class’, ‘image-info-active’);
});
$(‘.image-container’).live(‘mouseout’, function(){
$(this).children(‘div’).attr(‘class’, ‘image-info’);
});
jQuery(‘#loader’).remove();
}
$(‘photo’).mouseover(function(){$(‘image-info-active’).showTitle;})
</script>
<style type=”text/css”>
body, html {background: #000; font-size: 12px;}
#container {width: 810px; margin: 0 auto 0 auto;}
#notice {color: #fff; font-weight: bold; font-size: 15px; font-style: italic;}
h1 {font-size: 38px; line-height: 45px;}
h1 span {font-size: 16px; color: #ff0084;}
h1 a:hover span {color: #fff;}
#tut-info {width: 810px; margin: 0 0 20px 0;}
#tut-info a {float: left; display: block; background: #fff; font-size: 20px; padding: 20px 20px; font-weight: bold; margin: 0 15px 0 0;}
#tut-info a:hover {background: #ff0084;}
#loader {margin: 20px 0 40px 350px;}
.image-container {height: 260px; width: 340px; position: relative; float: left; margin: 0 20px 20px 0; background-color: #666; border: 5px solid #fff; overflow: hidden;}
.image-info {display: none;}
.image-info-active {height: 180px; width: 240px; background: rgba(255,255,255,.85);}
a {cursor: pointer; text-decoration: none; color: #0063dc;}
a:hover {color: #fff; background: #0063dc;}
a.title {color: #ff0084;}
a.title:hover {color: #fff; background: #ff0084;}
.bottom {padding: 5px;}
.bottom p {margin: 0 0 5px 0; }
p.top {background: #fff; width: 240px; padding: 0 0 5px 0; margin: 0;}
a.title {font-size: 20px; font-weight: bold; display: block; line-height: 20px;}
span.author {font-size: 10px;}
.infoTitle {font-weight: bold; text-trasnform: uppercase;}
.clearfix:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; }
.clearfix {display:inline-block;}
.clearfix {display:block;}
</style>
</head>
<body>
<div id=”w”>
<h2>Infinite Loading Demo</h2>
<div id=”content”>
<div id=”container”>
<h1><a href=
“
Flickr API example, Javascript (jQuery), AJAX and JSON to Build a
Photo Wall</a></h1><a href=
“
My Flickr Photos</a>
<div class=”clearfix” id=”tut-info”><a href=
“
>></a>
</div>
<div class=”clearfix” id=”image-container”></div>
</div>
<a class=”fancybox” rel=”group” href=”image-container”><img src=”small_image_1.jpg” alt=”” /></a>
</div>
<script type=”text/javascript”>$(‘photo’).mouseover(function(){$(‘image-info-active’).showTitle;})</script>
<script type=”text/javascript”>
$(document).ready(function(){
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() – $(window).height() – 10) {
global_page++;
processSearch(global_page);
}
});
});
</script>
<script type=”text/javascript”>
$(document).ready(function() {
$(“.fancybox”).fancybox();
});
</script>
</body>
</html>
this is the code and i need to:
3. Display more info for each image:
– image title
– owner username
– image description
4. Apply “Fancybox” or “jQuery Lightbox” or any other images gallery so that you can preview the images nicely.