随机变换banner

WordPress | 2008-10-2 星期四 0:12   修改@2008-10-09 15:55 | 评论↓

自从用了这个genkitheme-fixed主题,顶部可以设置一张banner,我就换上了自己收藏的故宫图片。但因为收藏的故宫图片有一系列不少张,很多都挺好看的,一直念念不忘想轮番做成banner展示。一张一张慢慢换太麻烦了,当时就希望能实现类似K2主题中那种Custom Image Header功能。刚刚专门搜了一下,终于被我找到了实现的方法。介绍实现方法的那篇文章的说明很详细,这里我用自己的理解简单记录一下。

简单说来,就是将原本固定的单一banner的图片路径变成一个自动换图文件的路径,然后利用这个换图文件自动随机抓取自己建立的某个专门的banner文件夹里的图片。

以我的主题为例,首先是要找到模板里定义顶部banner的代码部分:

#header {
background: #dcdcdc url(images/header.jpg);
height: 200px;
margin: 20px;
width: 910px;
}

其中的images/header.jpg就是我们要换掉的路径。

然后是要上传自动换图文件到blog的某个目录里。该文章作者提供了一个现成的换图文件,我备份了一个到box上。这个文件的默认名称是headerimages.php,文件默认的读取路径的是一个headerimages文件夹里的图片,所以这个headerimages文件夹要建立在headerimages.php所在的同一目录里。当然也可以自己修改文件的读取路径就是了。假设这个换图文件是上传到blog的根目录,其路径就是

http://your.domain.name/headerimages.php

最后就是利用这个路径替换掉最开始的images/header.jpg。

参考文章[ blog ] 怎樣讓 banner 可以有換圖的效果

另外有人也提供了Matt的一种random image方法,应该是大同小异。具体做法就是将Matt的Random Image Script页面上的A Rotator Apart下面的这部分代码复制保存为一个ratate.php的文件,然后将这个rotate.php文件放在headerimages文件夹里和所有的banner图片在一起,再把原先的images/header.jpg用headerimages/rotate.php替换掉。

P.S.我现在比较郁闷的是不知为何,顶部banner在IE浏览器下显示不出来。

Update@08/10/04 23:00:顶部banner的headerimage终于在IE浏览器里也可以正常显示和变换了。

检查许久一直找不出毛病,最后无可奈何之下试验了一下将上面那段控制的CSS代码中那句

background: #dcdcdc url(images/header.jpg);

放到了整段代码的最后面,即

#header {
height: 200px;
margin: 20px;
width: 910px;
background: #dcdcdc url(images/header.jpg);
}

结果就意外地生效了。崩溃!!!



5 Responses to “随机变换banner”

  1. 1
    asiapan
    2008-10-3- 星期五 23:31    @reply     

    在IE浏览器里似乎看不到顶部banner,暂时不知道怎么解决。 🙁

  2. 2
    an9
    2008-10-5- 星期天 9:48    @reply     

    可以的,没问题。

  3. 3
    su27
    2008-10-5- 星期天 16:29    @reply     

    哈哈 老潘弄主题上瘾了

  4. 4
    冰古
    2008-10-5- 星期天 23:48    @reply     

    这样的效果还是不难实现的。

  5. 5
    para
    2010-4-27- 星期二 9:58    @reply     

    按照您的说明设置了,可是没有效果呢 😡 我目前使用的主题是
    Desire。请问有办法解决Desire首页图片不能随机显示的问题吗?

Leave a Comment

Tags allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

提示/Tips可使用Ctrl+Enter快速提交留言出口成脏一律垃圾处理。

blank