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

Simplify sprited thumbnail presentation

Browse source 
A generated style sheet is no longer needed and the HTML makes more sense.
This commit is contained in:
Wesley Moore 2010-03-01 07:37:38 +11:00
parent cca783c4ee
commit 51f62bf5ac
4 changed files with 16 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
output/css/style.css
View file

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

120
output/css/thumbs.css
View file

@ -1,120 +0,0 @@
#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;
}

11
output/js/home.js
View file

@ -1,21 +1,22 @@
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>';
<a href="' + (Mojo.escape(Mojo.normalize(o.href))) + '" rel="prettyPhoto[flickr]"><img src="' + (Mojo.escape(Mojo.normalize(o.src))) + '" alt="' + (Mojo.escape(Mojo.normalize(o.alt))) + '" /></a>\n\
</li>';
};
function populate_flickr(data, text_status) {
var ul = $("ul", "#flickr");
// ul.empty();
ul.empty();
jQuery.each($('photo', data), function(i, obj) {
var photo = $(obj);
var image = {
href: photo.attr('url_m'),
rel: "prettyPhoto[flickr]",
src: '/images/photos.jpg',
alt: photo.attr('title'),
};
var li = $(render_image(image));
$('a', li).css({backgroundPosition: (i + 1) * -75 + "px -75px"});
$('img', li).css({left: (i * -75) + 'px'});
ul.append(li);
});
$("a[rel^='prettyPhoto']").prettyPhoto({theme: "facebook"});

3
templates/image.html
View file

@ -1,3 +1,4 @@
<li>
<a href="{{href}}" rel="{{rel}}"></a>
<a href="{{href}}" rel="prettyPhoto[flickr]"><img src="{{src}}" alt="{{alt}}" /></a>
</li>