mirror of
https://github.com/wezm/wezm.net.git
synced 2024-12-18 18:29:54 +00:00
Simplify sprited thumbnail presentation
A generated style sheet is no longer needed and the HTML makes more sense.
This commit is contained in:
parent
cca783c4ee
commit
51f62bf5ac
4 changed files with 16 additions and 132 deletions
|
@ -221,13 +221,15 @@ 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;
|
}
|
||||||
background-position: -75px 0;
|
#flickr li img {
|
||||||
display: block;
|
position: absolute;
|
||||||
|
top: -75px;
|
||||||
|
}
|
||||||
|
#flickr li img:hover {
|
||||||
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Search Form //----------------------------------------------------------*/
|
/* Search Form //----------------------------------------------------------*/
|
||||||
|
@ -294,4 +296,4 @@ ul.inline li:first-child {
|
||||||
/* margin-top: -3px;*/
|
/* margin-top: -3px;*/
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
|
|
@ -1,21 +1,22 @@
|
||||||
jQuery(function () {
|
jQuery(function () {
|
||||||
function render_image(o) {
|
function render_image(o) {
|
||||||
return '<li>\n\
|
return '<li>\n\
|
||||||
<a href="' + (Mojo.escape(Mojo.normalize(o.href))) + '" rel="' + (Mojo.escape(Mojo.normalize(o.rel))) + '"></a>\n\
|
<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>';
|
</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($('photo', data), function(i, obj) {
|
jQuery.each($('photo', data), function(i, obj) {
|
||||||
var photo = $(obj);
|
var photo = $(obj);
|
||||||
var image = {
|
var image = {
|
||||||
href: photo.attr('url_m'),
|
href: photo.attr('url_m'),
|
||||||
rel: "prettyPhoto[flickr]",
|
src: '/images/photos.jpg',
|
||||||
|
alt: photo.attr('title'),
|
||||||
};
|
};
|
||||||
var li = $(render_image(image));
|
var li = $(render_image(image));
|
||||||
$('a', li).css({backgroundPosition: (i + 1) * -75 + "px -75px"});
|
$('img', li).css({left: (i * -75) + 'px'});
|
||||||
ul.append(li);
|
ul.append(li);
|
||||||
});
|
});
|
||||||
$("a[rel^='prettyPhoto']").prettyPhoto({theme: "facebook"});
|
$("a[rel^='prettyPhoto']").prettyPhoto({theme: "facebook"});
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
<li>
|
<li>
|
||||||
<a href="{{href}}" rel="{{rel}}"></a>
|
<a href="{{href}}" rel="prettyPhoto[flickr]"><img src="{{src}}" alt="{{alt}}" /></a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue