支持jQuery的推荐文章SlideShow

十月 8th, 2008 by Soloman | Print 支持jQuery的推荐文章SlideShow | 3,097 views

今天将我的博客添加了一个很酷的功能:用SlideShow的方式来显示推荐文章,下面向大家介绍下这个插件的用法。关于这个功能,其实有个很有名的插件:The Featured Content Gallery Plugin。不过这个插件使用的javascript库和我主题上使用的jQuery有冲突,无法使用。经过我的多方搜索,找到了这个支持jQuery的SlideShow,功能稍弱,但也比没有来得华丽。

具体的实现效果可以参见我的博客主页:老所工作室

该插件叫:Dk Obama Jquery Plugin,大家可以到其主页下载。

安装很简单,将zip包解压到plugins三目录,注意,其安装包没有打包根目录,我们需要先在plugins目录下建立一个dkobama-jquery目录,然后把zip文件里的内容释放到里面。在管理页面里启用该插件后,在设置里就会多出一个该插件的配置页面:

我们上传一些帖子的图片,然后将其填写到配置里,保存。

最后,打开我们需要放置该缩略图的主题模板(一般是index.php),添加如下语句即可:

<?php include (ABSPATH . '/wp-content/plugins/dkobama-jquery/dkobama.php'); ?>

如果尺寸不合适,我们可以修改插件包里的css文件(css/obama-jquery.css),如果还不嫌麻烦,还可以修改css/imagens下的图片。这个css文件很简单,大家自己就可以调整了:

#area-destaques ul, ol, li{list-style:none; margin:0; padding:0;}
#area-destaques img{border:0;}
#area-destaques a{text-decoration:none;}
#area-destaques {font-size: .75em; line-height: 1.5em; color: #424242;}

#area-destaques { position: relative; width:600px; height:320px;background-image: url(../css/imagens/bg.jpg); }
#area-destaques .area-noticias {line-height:0px; }
#area-destaques #coluna-direita {position: absolute; top: 0; right: 0; float: left; width: 171px; height:320px; background-image: url(../css/imagens/destaques-bg.gif);}
#area-destaques #coluna-direita h3 { color: #6FA3DC; margin: 10px 20px 0 20px; font-size: 16px; }
#area-destaques #coluna-direita #arrow { position: absolute; }
#area-destaques #coluna-direita #itens-noticias { width: 150px; margin: 20px; }
#area-destaques #coluna-direita #itens-noticias li { margin: 10px 0 10px 0; }
#area-destaques #coluna-direita #itens-noticias a {font: 11px arial; color: #19669C; outline: none; position: relative;}
#area-destaques #coluna-direita #itens-noticias a:hover { color: white; background: transparent;}
#area-destaques #coluna-direita #itens-noticias .selecionado {font-size:18px;}

最后,我们添加的图片尺寸也要合适,比如我用的就是409×320,不过根据你的修改,这个尺可能不一样。

祝大家都有一个华丽丽的首页!

, ,

 

本文有28条评论

  1. Shawn 说: [回复]

    我记得 jQuery 有不少插件可以实现这个效果。当然,肯定没有插件来的方便。

  2. Soloman 说: [回复]

    其实我是javascript小白,jQuery是干什么的我都不知道:)还是只能从插件入手啊,另外看了你的blog,很酷!

  3. Shawn 说: [回复]

    我看你这个主题调用了 jQuery 框架,如果只实现一两个功能的话比较浪费。jQuery 很简单的,是那种俩小时就能上手的东西,所有有空你可以研究一下 docs.jquery.com 。

  4. Soloman 说: [回复]

    多谢多谢:)

    我这个主题也是适用别人的做好的,别人用了,我也没办法:)

  5. Yacca 说: [回复]

    好多华丽丽的效果-.- 譬如右上角 哈哈

  6. Soloman 说: [回复]

    @Yacca

    难道我长得华丽丽么?呵呵~

  7. MY-Hou 说: [回复]

    太酷了,不过暂时还不是很适合我,先找个地方试一下…
    华丽丽…囧

  8. Patrick 说: [回复]

    这个牛!喜欢,改天我也弄个这个效果!
    顺便问一下,你的这个 实时评论预览 功能是怎么实现的?还有这个评论框编辑功能 wmd 是个插件?

  9. Soloman 说: [回复]

    @Patrick 评论预览和这个回复编辑器都是这个主题自带的,这个主题叫做Desk Space : http://dirtybluemedia.com/portfolio/desk-space-wordpress-theme/

  10. Soloman 说: [回复]

    @Patrick 我看了下,这个wmd是一个编辑器,主页在http://wmd-editor.com , 实时预览的功能也是这个编辑器所有的,这里有个官方的demo: http://wmd-editor.com/examples/splitscreen

  11. Shawn 说: [回复]

    @Soloman 要实现实时预览还有另一个插件可以实现,好像叫 live-preview.

    我还是觉得这个编辑器不好用,不如 wp 自带的方便,而且代码的转换对第一次使用的人来说有点莫名其妙。

    BTW,我是看见你投递的这个文章在 Wordpress 非官方中文站出现所以又过来留言的。。。

  12. Soloman 说: [回复]

    @Shawn 这篇文章我投递过,但是好像没被通过吧,通过了吗?哈哈

  13. Soloman 说: [回复]

    @Shawn 这个编辑器确实有些毛病。。。

  14. Shawn 说: [回复]

    @Soloman 当然通过了,要不我怎么能看见。。。

  15. NetPuter 说: [回复]

    终于看懂了!!
    等我真正学会JQ再来鸟~

  16. 琪琪老爸 说: [回复]

    呵呵,找了好久,终于找到了,正在对自已首页那个slideshow犯愁呢.正好用这个试下,既可以完善原效果,又不破坏原theme格局.

  17. Soloman 说: [回复]

    @琪琪老爸 你的blog访问不了么,不知道你加成功没

  18. 琪琪老爸 说: [回复]

    加了一下,效果不是很好,好象和在用theme自带的js有冲突,出不了效果。后台配置后不能保存.

  19. 老所 说: [回复]

    @琪琪老爸 嗯,有两个类似都插件,文章里都有提到,一个是这个,还有一个叫 The Featured Content Gallery Plugin ,文章里这个是兼容 jQuery 库的,如果你的主题是另一个 js 库的话,试一下那个插件。

  20. 琪琪老爸 说: [回复]

    该死的空间商,服务器当掉了。从昨天晚上搞到现在还没有搞好。只有等好了再试.

  21. lioz 说: [回复]

    狂帅的……
    可惜我的博客是在blogbus上的……
    自己去找下CSS源码去

  22. paul 说: [回复]

    zhe ge dongxi bucuo de ,hehe

  23. holylone 说: [回复]

    您还有这个插件的代码么?这个插件官方已经没有了,希望您能给我传一个。谢谢

Other Discussion on This Post

  1. 支持 jQuery 的 WordPress 幻灯插件 - WordPress 非官方中文站
  2. Carisoprodol.

添加评论 (支持Gravatar头像)

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。

实时评论预览