Website to Gallery
500px Page -> Feed Rss -> JSON -> Lightbox Gallery
Per fare tutto ciò una volta ci volevano dei giorni, ora si realizza tutto con Jquery e due plugin poco invasive.
Il tutto anche testabile con http://jsfiddle.net/
Piccolo update: demo salvata su jsfiddle
Il plugin di jQuery pare ora svanito nel nulla, per fortuna ne esistono ancora delle copie in rete.
Sotto il codice, qua un’anteprima a schermo intero
<head>
<script type=“text/javascript” src=“http://leandrovieira.com/projects/jquery/lightbox/js/jquery.lightbox-0.5.pack.js”>script>
<script type=“text/javascript” src=“http://bobcravens.com/demos/RssDemo/scripts/jquery.jgfeed-min.js”>script>
<link rel=“stylesheet” type=“text/css” href=“http://leandrovieira.com/projects/jquery/lightbox/css/jquery.lightbox-0.5.css” media=“screen” />
<script>
$.jGFeed(‘http://500px.com/glaucopater/rss’,
function(feeds){
// Check for errors
if(!feeds){
// there was an error
return false;
}
// do whatever you want with feeds here
for(var i=0; i<feeds.entries.length; i++)
{
var entry = feeds.entries[i];
console.log(entry);
// Entry title
//$(‘#results’).append(entry.title + ‘ : ‘ + entry.link + ‘
‘);
var img = $(“img”, entry.content).attr(“src”);
var title = entry.title;
var link = entry.link;
$(‘#results’).append(“+img +“‘ style=’width:150px;height:150px;’/>“);
};
$(function() {
$(‘#results a’).lightBox({fixedNavigation:true});
});
}, 9);
</script>
head>
<body>
<div id=“results”>div>
body>
