Life Studio » 图片 http://wange.im My Life, My Studio... Sat, 05 May 2012 00:26:50 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 基于 jQuery 的图片/文字无缝滚动 http://wange.im/marquee-scroll.html http://wange.im/marquee-scroll.html#comments Tue, 20 Dec 2011 15:14:53 +0000 万戈 http://wange.im/?p=5213 你知道 jQuery，你也知道图片滚动的效果，但是你知道啥叫无缝滚动不？无缝滚动，就是无缝的滚动！换句话说，无缝滚动就是，图片或者文字下一张下一张地滚动，当滚动到屁股的时候就看到头了，反过来，当滚动到头的时候又能看到屁股了。还是看 DEMO 吧，或许更好理解一些。如你所见，当作为一排图片展示的时候，无缝滚动可以让人有无尽的感觉，页面一下子就充实了。

因为我也不是刻意去写这个 jQuery 的无缝滚动，所以 JS 也没封装过，只提供了几个基本的参数作修改，只能仅作参考。

HTML 部分：

<div class="scroll_area">
    <div class="scroll_list">
        <ul class="scroll_ul">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>
    <a id="prev" class="btn_icon" href="javascript:;">上一个</a>
    <a id="next" class="btn_icon" href="javascript:;">下一个</a>
</div>

jQuery 部分：

$(function() {
    //配置变量
    var config = {
        showNum : 3,    //设置滚动的显示个数
        autoScroll : false,    //是否自动滚动，默认为 false
        autoScrollInterval : 3000    //自动滚动间隔，默认为 3000 毫秒，autoScroll = true 时才有效
    }
   
    var scrollUlWidth = $('.scroll_ul li').outerWidth(true),    //单个 li 的宽度
        scrollUlLeft = 0,    //.scroll_ul 初使化时的 left 值为 0
        prevAllow = true,    //为了防止连续点击上一页按钮
        nextAllow = true;    //为了防止连续点击下一页按钮
       
    //计算父容量限宽
    $('.scroll_list').width(config.showNum * scrollUlWidth);

    //点击上一页
    $('#prev').click(function() {
        if (prevAllow) {
            prevAllow = false;
            scrollUlLeft = scrollUlLeft - scrollUlWidth;
            $('.scroll_ul').css('left', scrollUlLeft);
            //复制最后一个 li 并插入到 ul 的最前面
            $('.scroll_ul li:last').clone().prependTo('.scroll_ul');
            //删除最后一个 li
            $('.scroll_ul li:last').remove();
            $('.scroll_ul').animate({
                left : scrollUlLeft + scrollUlWidth
            }, 300, function() {
                scrollUlLeft = parseInt($('.scroll_ul').css('left'), 10);
                prevAllow = true;
            })
        }
    });
   
    //点击下一页
    $('#next').click(function() {
        if (nextAllow) {
            nextAllow = false;
            $('.scroll_ul').animate({
                left : scrollUlLeft - scrollUlWidth
            }, 300, function() {
                scrollUlLeft = parseInt($('.scroll_ul').css('left'), 10);
                scrollUlLeft = scrollUlLeft + scrollUlWidth;
                $('.scroll_ul').css('left', scrollUlLeft);
                //复制第一个 li 并插入到 ul 的最后面
                $('.scroll_ul li:first').clone().appendTo('.scroll_ul');
                //删除第一个 li
                $('.scroll_ul li:first').remove();
                nextAllow = true;
            })
        }
    });
   
    //自动滚动
    if (config.autoScroll) {
        setInterval(function() {
            $('#next').trigger('click');
        }, config.autoScrollInterval)
    }
})

基本原理和使用方法都写在注释里了，我也就不多作解释了。最后说一句，google、百度上搜一下就知道，已经有大把大把写好的横的竖的无缝的滚动，总有一款适合你，但是我觉得，只有自己亲自写的才最适合自己的需要，所以就有了以上代码。

]]> http://wange.im/marquee-scroll.html/feed 33 jQuery 按需加载 HighSlide 效果 http://wange.im/jquery-highslide-on-demand.html http://wange.im/jquery-highslide-on-demand.html#comments Mon, 10 Oct 2011 14:09:48 +0000 万戈 http://wange.im/?p=5132 从本文标题可知，这篇文章和上一篇的《jQuery 按需加载轮播图》有着说不清道不明的关系，是的，我就他瞄的和按需加载较上劲了，用 jQuery 来做 HighSlide 的插件已经有不少了，我再横插一脚就是为了这个按需加载，而且还要做到最精简最优化。做这个的理由和上一篇文章中提到的基本一样，第一，为了加载速度的大大提升；第二，为了满足 SEO 的需求。

相信大多数同学，包括我在内，用到的图片 HighSlide 效果都是用的 WordPress 的插件，或者引的 jQuery 的插件，但是这必竟不能完全满足我的需求，而且在我看来那些 JS 也太庞大了一些，还不如自己写一个。做了一个简单的 DEMO，大家可以看一下。

如果你会用 Firebug 这样的工具，就可以看到，页面中所有的图片，包括 DOM 节点，都是通过 JS 注入进来的，而且在初使化的时候只生成当前显示的五组图片，只有当用户点击下一张或者点击图片放大时，才会有新的图片和节点加载进来，同样，如果用户不点击，就不会去加载。这就大大节省了初使化需要加载的图片数量。

在 JS 没有压缩之前，也只有区区 6K 的大小，所以我相信这是大多数用户和站长都能够接受的，不过虽说只有 6K，也有近 200 行的代码，篇幅有限，我就不把具体的 JS 和 CSS 贴出来了，有需要的朋友可以直接下载我的 DEMO，DEMO 里的 JS 没有压缩，注释也都写的比较清楚。

最终效果和现在我用的差不多，但是代码却千差万别，细节决定成败，争取做好每一个细节！

]]> http://wange.im/jquery-highslide-on-demand.html/feed 40 jQuery/JavaScript 实现的异步加载图片 http://wange.im/jquery-js-ajax-pic.html http://wange.im/jquery-js-ajax-pic.html#comments Sun, 10 Apr 2011 12:55:34 +0000 万戈 http://wange.im/?p=4745 前天我亲奶滴偶像+室友+同事任平生小盆友在为我首页加载的速度上挑刺（YSlow V2下Grade A的我已经神一般的飞速了 O(∩_∩)O~），还真被他一眼挑出几个可以优化的细节之处，比如说首页文章列表页的展开后显示的缩略图，任平生GG 表示，这些图片完全可以不用事先加载，等用户点击展开之后才加载，不点击就不加载。这样一来，以我首页显示10篇文章列表为例，如果每篇缩略图6K左右，一个首页加载就节省了60K左右，何乐而不为呢？

任平生GG 用的是 jQuery 实现的图片异步加载，而我整理了一下，又折腾了一个 JavaScript 版的图片异步加载效果，两者原理是一样一样的，先请看 DEMO。

在上代码之前先说一下简单的原理，我们知道在 img 标签中的 src 属性是指向图片地址，要实现异步加载，就先暂时不给 src 属性赋值，而是先找个中间变量的属性 data-src，把图片地址写在 data-src 属性里，然后当触发 onclick 事件的时候，把 data-src 的值复制给 src，也就实现了异步加载。

代码时间到，因为无论是 jQuery 还是 JavaScript 的方法，HTML 的结构是相同的，如下：

<div id="box">
    <input type="submit" value="异步加载图片" id="submitBtn" />
    <div class="picBox">
        <img data-src="logo.png" alt="" class="logo" />
    </div>
</div>

先上 jQuery 的方法：

$(document).ready(function(){
    $('#submitBtn').click(function() {
        var imgSrc = $(this).next().find('.logo').attr('data-src');
        $(this).next().find('.logo').attr('src', imgSrc);
    });
});

再比较一下 JavaScript 的方法：

window.onload = function(){
    document.getElementById('submitBtn').onclick = submitBtn;
}
function submitBtn(){
    var imgTag = document.getElementById('box').getElementsByTagName('img');
    var imgSrc = imgTag[0].getAttribute('data-src');
    imgTag[0].setAttribute('src',imgSrc);
}

再来玩一下这个 DEMO，按照这个原理，发现自己写一个 lazyload 的 jQuery 插件也并不是很难嘛，哈哈～

]]> http://wange.im/jquery-js-ajax-pic.html/feed 122 WordPress 实现带图片的点击量排行 http://wange.im/most-viewed-with-thumbs-for-wordpress.html http://wange.im/most-viewed-with-thumbs-for-wordpress.html#comments Sat, 26 Mar 2011 14:37:23 +0000 万戈 http://wange.im/?p=4678 在 WordPress 中，我一般用 wp-postviews 插件来统计点击量的多少，这个插件应该是最常用的了，功能很强大，感谢插件的作者。而且插件还自带了一些函数，比如统计最多点击量的文章和页面等，但是你有没有想过输出一些带有图片的点击量排行？可能对于文章内图片比较多的博客比较有用吧。

这个想法已经在之前的 WordPress 免插件实现图片相关日志中有所提及，所以本文的 WordPress 实现的带图片的点击量排行也是依照这个原理，不过这并不是完全非插件的，还是需要 wp-postviews 插件的支持，以此来对点击量进行排行。在看以下代码之前，建议你先看一下 WordPress 的缩略图利器 timthumb 这篇文章，因为在以下的图片缩略图功能借助于 timthumb 这个第三方的缩略图功能。

然后，把以下代码复制到 WordPress 主题的 functions.php 中：

function most_viewed($mode = '', $limit = 10, $display = true) {
    global $wpdb, $post;
    $where = '';
    $temp = '';
    $output = '';
    if(!empty($mode) && $mode != 'both') {
        $where = "post_type = '$mode'";
    } else {
        $where = '1=1';
    }
    $most_viewed = $wpdb->get_results("SELECT DISTINCT $wpdb->posts.*, (meta_value+0) AS views FROM $wpdb->posts LEFT JOIN $wpdb->postmeta ON $wpdb->postmeta.post_id = $wpdb->posts.ID WHERE post_date < '".current_time('mysql')."' AND $where AND post_status = 'publish' AND meta_key = 'views' AND post_password = '' ORDER  BY views DESC LIMIT $limit");
    if($most_viewed) {
        foreach ($most_viewed as $post) {
            $post_title = get_the_title();
            if(has_post_thumbnail( intval($post->ID) )){
                $timthumb_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
                $post_timthumb = '<img src="'.get_bloginfo("template_url").'/timthumb.php?src='.$timthumb_src[0].'&amp;h=78&amp;w=78&amp;zc=1" alt="'.$post_title.'" />';
                $output .= '<li><a class="pic" href="'.get_permalink().'" title="'.$post_title.'">'.$post_timthumb.'</a></li>';
            } else {
                $post_timthumb = '';
                ob_start();
                ob_end_clean();
                $temp = preg_match('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $index_matches);//获取日志中第一张图片
                $first_img_src = $index_matches [1];    //获取该图片 src
                if( !empty($first_img_src) ){    //如果日志中有图片
                    $post_timthumb = '<img src="'.get_bloginfo("template_url").'/timthumb.php?src='.$first_img_src.'&amp;h=78&amp;w=78&amp;zc=1" alt="'.$post_title.'" />';
                    $output .= '<li><a class="pic" href="'.get_permalink().'" title="'.$post_title.'">'.$post_timthumb.'</a></li>';
                } else {    //如果日志中没有图片，则显示默认
                    $post_timthumb = '<img src="'.get_bloginfo("template_directory").'/img/default.gif" />';
                    $output .= '<li><a class="pic" href="'.get_permalink().'" title="'.$post_title.'">'.$post_timthumb.'</a></li>';
                }
            }
        }
    } else {
        $output = '<li>N/A</li>'."\n";
    }
    if($display) {
        echo $output;
    } else {
        return $output;
    }
}

然后，在需要的地方可以如下调用：

<?php
    echo '<ul>';
    most_viewed('post',10,true);
    echo '</ul>';
?>

好了，就是这样，现在回过头来看看好简单，但是我却写了一上午，为了兼容不同主题，以上代码我特别作了精简，如需更多完整功能，比如说缓存站外的图片，就可以参考一下我之前写的这篇文章，有需要的就自己合并两篇文章的代码啦。

另外，A5论坛正在举办“乐享生活 乐享陶瓷”征文活动，参与就可以获得精美陶瓷及千元现金，如果对本文代码没有兴趣，又不想空手而归的童鞋们不妨去瞧一瞧看一看（-> 传送门）。

]]> http://wange.im/most-viewed-with-thumbs-for-wordpress.html/feed 139 杂谈 CSS 实现的图片放大效果 http://wange.im/zoom-in-pic-with-css.html http://wange.im/zoom-in-pic-with-css.html#comments Tue, 08 Feb 2011 12:04:04 +0000 万戈 http://wange.im/?p=4511 我的文章内容总是围绕着自己的博客出发，本文也不例外，今天比较了一下关于各浏览器中用 CSS 实现的图片放大效果，特别是 IE 和 Firefox、Chrome 等其他一些标准的浏览器，我在自己的博客也用上了这样的效果。实例请见我博客顶部右侧的 SNS 分享和订阅按钮，把鼠标移动上去就会有图标放大的效果，如果还在 CSS2.0 时代，或者说是 IE 浏览器时代，要实现这样的效果只需要给 hover 伪类另外定义一个图片就可以了。但是现在已经是 CSS3.0 时代了，这个效果的实现将会更加简单，但是与此同时，我们要知道 CSS3.0 时代是不属于 IE 的时代。

为了总结比较这两种效果，我特地做了两个 DEMO。

我们先看 DEMO1，这个图片放大效果是 CSS2.0 下的，具体的 HTML 和 CSS 如下：

<style type="text/css">
    .rss{
        position:absolute;
        top:200px;
        left:200px;
        text-indent:-9999em;
        width:100px;
        height:100px;
        display:block;
        background:url(rss_s.jpg) no-repeat;
    }
    #css2:hover{
        top:0;
        left:0;
        width:500px;
        height:500px;
        background:url(rss_l.jpg) no-repeat;
    }
</style>
<a class="rss" id="css2" href="#">RSS</a>

优点：兼容性好，所有浏览器支持。

缺点：1、分别需要大图和小图两张图片。

2、因为用到 hover，所以在 IE6 下只有 a 标签才可以，IE6 不支持 hover 以外的 伪类。

然后我们再来看 DEMO2，这个图片放大效果是 CSS3.0 下的，部分 HTML 和 CSS 是和上面的样同的，我也就再重复写一遍了，具体的 HTML 和 CSS 如下：

<style type="text/css">
    .rss{
        position:absolute;
        top:200px;
        left:200px;
        text-indent:-9999em;
        width:100px;
        height:100px;
        display:block;
        background:url(rss_s.jpg) no-repeat;
    }
    #css3:hover{
        -webkit-transform:scale(5);
        -moz-transform:scale(5);
        -o-transform:scale(5);
    }
</style>
<a class="rss" id="css3" href="#">RSS</a>

优点：只需要一张图片就可以实现。

缺点：1、IE 不支持。

2、小图被强行扯大，分辨率不变的前提下，放大后会显得模糊。

到底哪个方法更好？这还要看具体需求。比如，我在顶部的几个小图标上就是用的 CSS3 的方法，因为放大的倍数不大，所以也不是很模糊，IE就无视了。

话再说回来，我把 CSS3 的 transform 属性拿来和 CSS2 中的图片放大效果比较，实在是太太太屈才了。因为一方面，CSS2 的那个方法严格意义上来说并不是放大方法，只是用 hover 伪类来模仿的效果，再者， transfrom 不仅仅是可以作用于图片，文字也同样有效，而且放大只是 transform 的一个值，它还能旋转，如果你的浏览器不是 IE，可以把鼠标放到评论头像上看看效果，那也是用 transform 实现的，很好很强大吧。

]]> http://wange.im/zoom-in-pic-with-css.html/feed 91 WordPress 自定义顶部图像 http://wange.im/add-custom-image-header-in-wordpress.html http://wange.im/add-custom-image-header-in-wordpress.html#comments Sat, 29 Jan 2011 13:34:28 +0000 万戈 http://wange.im/?p=4411 如果我没有记错的话，Wordpress 自定义顶部图像的功能是从 3.0 版本才开始有的，虽然升级到 WordPress 3.0+ 已经有一段时间了，但是我一直认为这是一个很鸡肋的功能，所以也没有将其开启。不就是换个 LOGO 或是 Banner 图片嘛，换张图片，改改样式就可以了嘛，或许我说的比较轻松，但是对于看代码如看天书的小盆友来说，这还是会有点小麻烦。为了今后我所分享的万戈牌主题可以男女老少皆宜，所以我把这个看似看鸡肋的功能也添加到了主题中。

还是老样子，在你的 WordPress 主题中 functions.php 中添加如下代码：

define('HEADER_IMAGE', '%s/images/logo.gif');    //默认图片路径
define('HEADER_IMAGE_WIDTH', 265);
define('HEADER_IMAGE_HEIGHT', 137);
define('NO_HEADER_TEXT', true );
define('HEADER_TEXTCOLOR', '');
function admin_header_style() { ?>
    <style type="text/css">
        #headimg{width:<?php echo HEADER_IMAGE_WIDTH; ?>px;height:<?php echo HEADER_IMAGE_HEIGHT; ?>px;background:url(<?php header_image(); ?>) no-repeat #fff;}
        #headimg h1,#desc{display: none;}
        .wrap{clear:both;}
    </style>
<?php }
function header_style() { ?>
    <style type="text/css">
        header h1 a{width:<?php echo HEADER_IMAGE_WIDTH; ?>px;height:<?php echo HEADER_IMAGE_HEIGHT; ?>px;display:block;background:url(<?php header_image(); ?>) no-repeat;text-indent:-9999em;}
    </style>
<?php }
if ( function_exists('add_custom_image_header') ) {
    add_custom_image_header('header_style', 'admin_header_style');
}

其实我都懒的写注释了，Wordpress 对常量命名还是很科学的，基本一眼就能看出是个啥用的，想有更多扩展的可以直接看 WordPress 的官方文档介绍。

添加以上代码后，如不出意外就可以在 WordPress 后台的外观选项中看见新添加的一个控制菜单-顶部，如下图：

我觉得这个功能唯一有点炫的地方就是可以通过裁剪功能来控制图片的尺寸，保证上传的图片不会因像素固定而变形失真，可以拿来耍一下宝。

PS：图中的 LOGO 是枫雪童鞋在一个大清早给我倾情设计的，很给力吧~~~但是有小盆友很 YD 地把 LOGO 左边那个“小尾巴”误认为是小蝌蚪！你妹的，那是鼠标啊！！！象征着我的光辉人生的指向标！！！多么的崇高！！！打消一切小蝌蚪的邪念！！！

与

,,,

相关的文章
]]> http://wange.im/add-custom-image-header-in-wordpress.html/feed 120 自定义 WordPress 表情路径 http://wange.im/custom-smilies-src-for-wordpress.html http://wange.im/custom-smilies-src-for-wordpress.html#comments Tue, 18 Jan 2011 12:25:14 +0000 万戈 http://wange.im/?p=4376 我每天都会走访很多朋友的博客，大多数都是 WordPress 的忠实拥护者，我们都会互相留言表示到此一游。在我路过的博客中大多数都开启了 WordPress 的表情功能，而其中的大多数都没有用 WordPress 默认自带的那 22 个丑到爆的表情，我们都追求个性化。但是我们是怎么替换这些表情的呢？相信大多数人和我之前一些，用最原始的方法，那就是以原文件名覆盖替换 WordPress 的 wp-includes/images/smilies 下的图片文件。那么如果碰到 WordPress 升级，或者更换主题后需要换另一套搭配的表情时，那我们就又需要再这样重复操作一遍。无论怎么样，我们都是不建议修改 WordPress 中的源代码的，哪怕只是图片。

其实 WordPress 已经给我们预留了表情路径的钩子，我们完全可以在主题的函数中自定义这个路径，而不必大费周章去覆盖替换原表情图片。方法很简单，在 WordPress 主题的 functions.php 文件中加入以下代码就可以了：

add_filter('smilies_src','custom_smilies_src',1,10);
function custom_smilies_src ($img_src, $img, $siteurl){
    return get_bloginfo('template_directory').'/images/smilies/'.$img;
}

从以上代码中可以看出，我的表情图片是放在主题目录的 images/smilies 中，这样可以更方便地随自己的主题进行管理，当然以上只是修改 WordPress 表情的路径，要激活表情功能还需要参看此文，如果你觉得 22 个表情不够爽的话还可以看看这篇文章。

]]> http://wange.im/custom-smilies-src-for-wordpress.html/feed 213 WordPress 的缩略图利器 timthumb http://wange.im/timthumb-for-wordpress.html http://wange.im/timthumb-for-wordpress.html#comments Mon, 17 Jan 2011 13:59:52 +0000 万戈 http://wange.im/?p=4372 很多童鞋应该都有用过 WordPress 的缩略图功能，暂且不说那些形形色色的缩略图插件，Wordpress 2.9 版本之后就新增自带了缩略图的功能，但是不知道你有没有和我同样的感觉，Wordpress 自带的缩略图还是有很大的局限性，比如说只能自动裁剪一个正方形的图片，而不能裁剪成长方形的；又比如说，只能接受站内或者说多媒体库里的图片，对站外图片就无从下手了；再比如说图片所在文件夹不是同一个，不方便管理。总之，Wordpress 自带的缩略图功能并没有我们想象的那样强大，这时候我们需要第三方文件 timthumb.php 项目来帮助我们。

现在我的主题上用到的缩略图都是 timthumb.php 来实现的，具体实例可以看我的首页幻灯片轮播部分，查看相应的幻灯图片的源码可以看到，图片的地址路径是 ****timthumb.php?src=****&h=245&w=560&zc=1 这样的格式，这就是被 timthumb.php 生成的缩略图，很神奇吧。

说了半天，什么是 timthumb.php 呢？这是一个专门为 WordPress 而开发的缩略图应用的项目。有点类似于插件，但是又和 WordPress 插件不同，因为它不是被上传于 plugins 文件夹下，而是需要上传到你的主题文件夹中。你可以在这里了解和下载最新版本的 timthumb.php，一般默认配置也就可以了，如果想进一步优化可以根据需要修改 timthumb.php 里前30行的参数。

说到 WordPress，纯文字有点太对不起观众，所以最后上一段我自用的缩略图代码，结合了 timthumb.php 和 WordPress 自带的缩略图功能，支持站外链接图片，自动缓存图片。代码如下：

<?php
function post_thumbnail( $width = 100,$height = 80 ){
    global $post;
    if( has_post_thumbnail() ){    //如果有缩略图，则显示缩略图
        $timthumb_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
        $post_timthumb = '<img src="'.get_bloginfo("template_url").'/timthumb.php?src='.$timthumb_src[0].'&amp;h='.$height.'&amp;w='.$width.'&amp;zc=1" alt="'.$post->post_title.'" class="thumb" />';
        echo $post_timthumb;
    } else {
        $post_timthumb = '';
        ob_start();
        ob_end_clean();
        $output = preg_match('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $index_matches);    //获取日志中第一张图片
        $first_img_src = $index_matches [1];    //获取该图片 src
        if( !empty($first_img_src) ){    //如果日志中有图片
            $path_parts = pathinfo($first_img_src);    //获取图片 src 信息
            $first_img_name = $path_parts["basename"];    //获取图片名
            $first_img_pic = get_bloginfo('wpurl'). '/cache/'.$first_img_name;    //文件所在地址
            $first_img_file = ABSPATH. 'cache/'.$first_img_name;    //保存地址
            $expired = 604800;    //过期时间
            if ( !is_file($first_img_file) || (time() - filemtime($first_img_file)) > $expired ){
                copy($first_img_src, $first_img_file);    //远程获取图片保存于本地
                $post_timthumb = '<img src="'.$first_img_src.'" alt="'.$post->post_title.'" class="thumb" />';    //保存时用原图显示
            }
            $post_timthumb = '<img src="'.get_bloginfo("template_url").'/timthumb.php?src='.$first_img_pic.'&amp;h='.$height.'&amp;w='.$width.'&amp;zc=1" alt="'.$post->post_title.'" class="thumb" />';
        } else {    //如果日志中没有图片，则显示默认
            $post_timthumb = '<img src="'.get_bloginfo("template_url").'/images/default_thumb.gif" alt="'.$post->post_title.'" class="thumb" />';
        }
        echo $post_timthumb;
    }
}
?>

可以把这部分函数写进 WordPress 主题的 functions.php 里，然后再用 post_thumbnail( 100,80 ) 这样调用，其中的 $width 和 $height 是必须的参数哟。以上代码不多作解释了，注释都写的蛮详细了。今天就到这里，事情太多，洗洗睡了~

]]> http://wange.im/timthumb-for-wordpress.html/feed 207 WordPress 非插件缩略图的综合应用 http://wange.im/wordpress-thumbnail-without-plugins.html http://wange.im/wordpress-thumbnail-without-plugins.html#comments Tue, 14 Sep 2010 14:20:15 +0000 万戈 http://wange.im/?p=3848 WordPress 2.9 起自带了缩略图的强大功能，对于一些图片比较多的博客，尤其是对 CMS 主题而言就很实用，在我看来，有了这个缩略图，就可以抛弃所有缩略图功能的插件了，这具体就看我们怎么应用它了。比如之前我介绍过的 WordPress 免插件实现图片相关日志就是用 WordPress 自带的这个缩略图功能实现的。今天就再介绍一个，就是我最近做主题用到比较多的一个综合应用。

效果就是，在有设置缩略图的时候显示缩略图，如果没有设置缩略图，则显示日志中的第一张图片，如果日志中连一张图片也没有，则显示默认图片。在和陈小黑合作的 SunMusic 主题上我就用过了这个效果，点此传送门火速围观。方法不算难，只是多加几个判断而已，具体如下：

在 WordPress 主题文件夹中的 functions.php 添加如下代码：

if(function_exists('add_theme_support')){
    add_theme_support( 'post-thumbnails' );
}
function post_thumbnail(){
    if(has_post_thumbnail()){    //如果有缩略图，则显示缩略图
        the_post_thumbnail();
    } else {
        global $post, $posts;
        $post_img = '';
        ob_start();
        ob_end_clean();
        $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
        $post_img_src = $matches [1][0];
        $post_img = '<img src="'.$post_img_src.'" alt="" />';    //如果没有缩略图，则显示日志中的第一张图片
        if(empty($post_img_src)){    //如果日志中没有图片，则显示默认图片
            $post_img = '<img src="'.get_bloginfo("template_url").'/images/default.gif" alt="" />';
        }
        echo $post_img;
    }
}

关键部分都注释了一下，需要注意的就是，还要放一张默认图片在主题的 images 文件夹中，接下来就是调用：

<?php post_thumbnail();?>

当然，以上代码是我精简下来的核心代码，我在实际运用中还添加了一些参数，增加了该函数的重复可用性，这个方法的适应性很强，可以应用在很多地方，比如说幻灯、首页缩略图、CMS 主题等等，更多扩展留给大家自己发挥吧。

]]> http://wange.im/wordpress-thumbnail-without-plugins.html/feed 100 获取 Live Skydrive 的真实地址 http://wange.im/real-url-in-skydrive.html http://wange.im/real-url-in-skydrive.html#comments Sun, 11 Jul 2010 13:38:14 +0000 万戈 http://wange.im/?p=3465 我们都知道，国外网站好的服务大多惨遭不幸，国内网站就没有什么出彩的服务可以和国外同类网站相比，就算偶尔冒出两个也维持不了多久，等翅膀长硬了，于是就纷纷搞收费服务，或者变向甚至不加掩饰地压缩用户现有的空间或者服务产品等。比如说自以为土皇帝的网易就这么干过，曾经应允了永久免费且支持外链的网易相册，在一夜之间，没有任何通知的情况下，就压缩了我所有高清的照片，分辨率和原图像素、大小都被大大压缩，这是何等的卑劣！所以之后我就毅然地放弃了网易相册，国内网站一般黑，我一刻也呆不下去了，之后我就选择了可靠的微软的服务，也就是现在的 Live Skydrive 作为图床。

为了不给服务器造成太大的压力，相信很多朋友都把图片和多媒体等比较大的文件放在第三方的服务器上，比如说 dropbox、skydrive 等，不过就如同之前所说的，国外很多优秀的网络服务都被墙奸了，现在稳定且还未被墙的第三方存储服务就要算 Skydrive 比较知名的了，我现在博客上的所有外链图片都是存放在 Skydrive 上的，比较满意。

不过用久了 Skydrive 就会发现一个问题，其外链地址是会改变的，这个让人比较囧，以至于上次发布了一本 w3school 离线版电子书教程的下载点，这本电子书存放在了 Skydrive 上，然后三天两头有人来提醒我说链接地址无效，我还经常去更新一下呢。知道 Skydrive 有这个问题（不知道是 bug？还是微软故意为之），但是一直不知道怎么解决。

那天看到灰狼兄的一篇文章，才恍然大悟，原来这是有解决办法的，是任平生大哥的杰作，严重怀疑任兄是微软的内部工作人员，居然能开发出 Live 服务这么多好的优化产品，我们是受益匪浅啊。以下就记录一下如何获取 Live Skydrive 外链的真实不变的地址。

在 Skydrive 登陆后，选择需要得到外链的文件页面，在浏览器的地址栏里粘贴以下代码：

javascript:var%20n=document.title.replace('%20-%20Windows%20Live','');var%20id=((location.hash=='')?window.selfPageData.currentItemHash:location.hash).replace('#resId/','');var%20u='http://storage.live.com/items/'+id+'?filename='+encodeURI(n);var%20p='http://'+document.location.host+'/redir.aspx?page=self&resId='+id;var%20e='<input%20onmouseover=%22this.select();%22%20onclick=%22this.select();%22%20value=%22';var%20f='%22%20style=%22width:580px%22%20type=%22text%22%20/><br>';var%20d='by%20(<a%20href=%22http://rpsh.net/%22>Rpsh</a>)';var%20c='\u5916\u94FE\u5730\u5740:'+d+e+u+f+'\u5206\u4EAB\u5730\u5740:'+e+p+f;var%20a=document.getElementById('content');var%20g=(a.getElementsByTagName('p')[0]);var%20b=g?g:document.createElement('P');b.innerHTML=c;a.insertBefore(b,a.firstChild);void(0)

此时会得到一个形如：http://storage.live.com/items/……这样的地址，这才是上传文件真正的、不变的、唯一的外链地址，很明显，这比原来那又臭又长的 URL 要干净清爽很多。如下图：

这张截图我就用了这唯一外链地址，另外我还想作个小测试，因为 Skydrive 的外链在某些网络下被墙的，比如在我学校的校园网内就无法看到在 Skydrive 上的外链图片，老七也是经常吼着看不到我的图，不知道现在换了新的不变的外链地址能不能看到这图呢？我明天去学校测试看看，也请大家帮忙测试啊，特别是七叔，能不能看到上面这张图？如果能看到的话就太好了，一下子解决了我两个问题。

参考自：http://rpsh.net/archives/get-direct-url-of-files-on-live-skydrive/

]]> http://wange.im/real-url-in-skydrive.html/feed 193