timthumb现在支持图像过滤器。。。包括(drumroll)灰度过滤器。
http://www.binarymoon.co.uk/2010/08/timthumb-image-filters/
完全是服务器端的,timthumb通过其缓存看到了许多速度改进。。。因此,图像不会每次都重新创建。
<img src="url-to-tim-thumb.php?src=url-to-image.png&w=200&h=200&f=2" />
然后你可以在没有滤镜的情况下再次吐出图像。。。所以你有一个颜色和一个灰度。。。。绝对地将一个放置在另一个之上,并使用jquery设置悬停时的不透明度动画。我不喜欢双重标记,但在多个图像上做任何事情(我尝试使用pixastic)都会拖慢我的加载时间。
<div class="img-wrap">
<img src="url-to-tim-thumb.php?src=url-to-image.png&w=200&h=200&f=2" class="grayscale"/>
<img src="url-to-tim-thumb.php?src=url-to-image.png&w=200&h=200" class="color"/>
</div>
我发现我必须用timthumb来确保它们的大小完全相同。。。并防止任何随机像素舍入错误。
在循环中,您可以通过以下部分获得特色图像的信息:
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src($image_id,’large’, true);
$alttext = get_post_meta( $image_id, \'_wp_attachment_image_alt\', true); ?>
$src = $image[0];
$width = $image[1];
$height = $image[2];