benw2/wezm.net
1
0
Fork 0
forked from wezm/wezm.net
Code Pull requests Activity

Load and style Flickr images via JS

Browse source
This commit is contained in:
Wesley Moore 2010-02-26 08:08:49 +11:00
parent 80eb529934
commit cca783c4ee
3 changed files with 22 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
layouts/home.html
View file

@ -9,8 +9,10 @@
<link rel="stylesheet" href="/css/thumbs.css" type="text/css" media="screen,projection" /> <link rel="stylesheet" href="/css/thumbs.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="/css/mobile.css" type="text/css" media="only screen and (max-device-width: 480px)" /> <link rel="stylesheet" href="/css/mobile.css" type="text/css" media="only screen and (max-device-width: 480px)" />
<link rel="stylesheet" href="/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" /> <link rel="stylesheet" href="/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script> <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>-->
<script src="/js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script> <script src="/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/mojo.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/home.js" type="text/javascript" charset="utf-8"></script> <script src="/js/home.js" type="text/javascript" charset="utf-8"></script>
</head> </head>
<body class="home"> <body class="home">
@ -46,11 +48,7 @@
<div id="flickr"> <div id="flickr">
<!-- <h1>Photos</h1> --> <!-- <h1>Photos</h1> -->
<ul class="inline"> <ul class="inline">
<% (1..20).each do |i| %> </ul>
<li class="<%= "t#{i}" %>">
<a href="http://farm3.static.flickr.com/2708/4302496460_a1ec313d06.jpg" rel="prettyPhoto[flickr]"></a>
</li>
<% end %>
</div> </div>
<%= render '_footer' %> <%= render '_footer' %>
</body> </body>

26
output/js/home.js
View file

@ -1,22 +1,26 @@
jQuery(function () { jQuery(function () {
function render_image(o) {
return '<li>\n\
<a href="' + (Mojo.escape(Mojo.normalize(o.href))) + '" rel="' + (Mojo.escape(Mojo.normalize(o.rel))) + '"></a>\n\
</li>';
};
function populate_flickr(data, text_status) { function populate_flickr(data, text_status) {
var ul = $("ul", "#flickr"); var ul = $("ul", "#flickr");
// ul.empty(); // ul.empty();
jQuery.each(data.photos.photo, function(i, photo) { jQuery.each($('photo', data), function(i, obj) {
var li = $("<li></li>"); var photo = $(obj);
var a = $("<a></a>"); var image = {
a.attr("href", photo.url_m); href: photo.attr('url_m'),
a.attr("rel", "prettyPhoto[flickr]"); rel: "prettyPhoto[flickr]",
var img = $("<img />"); };
img.attr('src', photo.url_sq); var li = $(render_image(image));
img.attr('alt', photo.title); $('a', li).css({backgroundPosition: (i + 1) * -75 + "px -75px"});
a.append(img)
li.append(a);
ul.append(li); ul.append(li);
}); });
$("a[rel^='prettyPhoto']").prettyPhoto({theme: "facebook"}); $("a[rel^='prettyPhoto']").prettyPhoto({theme: "facebook"});
}; };
// Populate Flickr // Populate Flickr
//jQuery.getJSON("http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=aa003631cc50bd47f27f242d30bcd22f&user_id=40215689%40N00&format=json&per_page=20&extras=url_sq,url_m&jsoncallback=?", populate_flickr); jQuery.get("/photos.xml", {dataType: 'xml'}, populate_flickr);
}); });

3
templates/image.html Normal file
View file

@ -0,0 +1,3 @@
<li>
<a href="{{href}}" rel="{{rel}}"></a>
</li>