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

Implement rendering of sprited thumbnails

Browse source
This commit is contained in:
Wesley Moore 2010-02-25 17:34:41 +11:00
parent b972da40b5
commit 80eb529934
5 changed files with 131 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
layouts/home.html
View file

@ -6,6 +6,7 @@
<title><%= @item[:title] %></title> <title><%= @item[:title] %></title>
<link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen,projection" /> <link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen,projection" /> <link rel="stylesheet" href="/css/style.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>
@ -45,9 +46,11 @@
<div id="flickr"> <div id="flickr">
<!-- <h1>Photos</h1> --> <!-- <h1>Photos</h1> -->
<ul class="inline"> <ul class="inline">
<li> <% (1..20).each do |i| %>
<a href="http://farm3.static.flickr.com/2708/4302496460_a1ec313d06.jpg" rel="prettyPhoto[flickr]"><img src="/images/photos/4302496460_a1ec313d06.jpg" alt="Test Monochrome" /></a> <li class="<%= "t#{i}" %>">
<a href="http://farm3.static.flickr.com/2708/4302496460_a1ec313d06.jpg" rel="prettyPhoto[flickr]"></a>
</li> </li>
<% end %>
</div> </div>
<%= render '_footer' %> <%= render '_footer' %>
</body> </body>

11
output/css/style.css
View file

@ -221,14 +221,13 @@ ul.inline li:first-child {
margin: 20px 0 0 20px; margin: 20px 0 0 20px;
display: block; display: block;
position: relative; position: relative;
}
#flickr a {
height: 75px; height: 75px;
width: 75px; width: 75px;
} background: url(/images/photos.jpg) no-repeat top left;
#flickr li img { background-position: -75px 0;
position: absolute; display: block;
}
#flickr li img:hover {
top: -75px;
} }
/* Search Form //----------------------------------------------------------*/ /* Search Form //----------------------------------------------------------*/

120
output/css/thumbs.css Normal file
View file

@ -0,0 +1,120 @@
#flickr li.t1 a {
background-position: -75px -75px;
}
#flickr li.t1 a:hover {
background-position: -75px 0;
}
#flickr li.t2 a {
background-position: -150px -75px;
}
#flickr li.t2 a:hover {
background-position: -150px 0;
}
#flickr li.t3 a {
background-position: -225px -75px;
}
#flickr li.t3 a:hover {
background-position: -225px 0;
}
#flickr li.t4 a {
background-position: -300px -75px;
}
#flickr li.t4 a:hover {
background-position: -300px 0;
}
#flickr li.t5 a {
background-position: -375px -75px;
}
#flickr li.t5 a:hover {
background-position: -375px 0;
}
#flickr li.t6 a {
background-position: -450px -75px;
}
#flickr li.t6 a:hover {
background-position: -450px 0;
}
#flickr li.t7 a {
background-position: -525px -75px;
}
#flickr li.t7 a:hover {
background-position: -525px 0;
}
#flickr li.t8 a {
background-position: -600px -75px;
}
#flickr li.t8 a:hover {
background-position: -600px 0;
}
#flickr li.t9 a {
background-position: -675px -75px;
}
#flickr li.t9 a:hover {
background-position: -675px 0;
}
#flickr li.t10 a {
background-position: -750px -75px;
}
#flickr li.t10 a:hover {
background-position: -750px 0;
}
#flickr li.t11 a {
background-position: -825px -75px;
}
#flickr li.t11 a:hover {
background-position: -825px 0;
}
#flickr li.t12 a {
background-position: -900px -75px;
}
#flickr li.t12 a:hover {
background-position: -900px 0;
}
#flickr li.t13 a {
background-position: -975px -75px;
}
#flickr li.t13 a:hover {
background-position: -975px 0;
}
#flickr li.t14 a {
background-position: -1050px -75px;
}
#flickr li.t14 a:hover {
background-position: -1050px 0;
}
#flickr li.t15 a {
background-position: -1125px -75px;
}
#flickr li.t15 a:hover {
background-position: -1125px 0;
}
#flickr li.t16 a {
background-position: -1200px -75px;
}
#flickr li.t16 a:hover {
background-position: -1200px 0;
}
#flickr li.t17 a {
background-position: -1275px -75px;
}
#flickr li.t17 a:hover {
background-position: -1275px 0;
}
#flickr li.t18 a {
background-position: -1350px -75px;
}
#flickr li.t18 a:hover {
background-position: -1350px 0;
}
#flickr li.t19 a {
background-position: -1425px -75px;
}
#flickr li.t19 a:hover {
background-position: -1425px 0;
}
#flickr li.t20 a {
background-position: -1500px -75px;
}
#flickr li.t20 a:hover {
background-position: -1500px 0;
}

BIN
output/images/photos.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 122 KiB

2
output/js/home.js
View file

@ -18,5 +18,5 @@ jQuery(function () {
}; };
// 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.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);
}); });