支持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，不过根据你的修改，这个尺可能不一样。

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

, ,

相关文章:

  1. 用滚动条显示超长代码行
  2. Yupoo，flickr的山寨版
  3. 在亚龙湾度假休闲
  4. 用Small Basic来绘制分形图
  5. 藏北草原村庄

 
This entry was posted on 星期三, 十月 8th, 2008 at 21:49 and is filed under 数码与互联网应用. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

本文有28条评论

  1. Shawn 说: [回复]
    十月 13th, 2008 at 04:24

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

  2. Soloman 说: [回复]
    十月 13th, 2008 at 14:36

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

  3. Shawn 说: [回复]
    十月 13th, 2008 at 14:50

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

  4. Soloman 说: [回复]
    十月 13th, 2008 at 14:54

    多谢多谢：)

    我这个主题也是适用别人的做好的，别人用了，我也没办法：）

  5. Yacca 说: [回复]
    十月 15th, 2008 at 16:41

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

  6. Soloman 说: [回复]
    十月 16th, 2008 at 04:34

    @Yacca

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

  7. MY-Hou 说: [回复]
    十月 21st, 2008 at 17:53

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

  8. Patrick 说: [回复]
    十月 24th, 2008 at 10:43

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

  9. Soloman 说: [回复]
    十月 24th, 2008 at 13:55

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

  10. Soloman 说: [回复]
    十月 24th, 2008 at 14:02

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

  11. Shawn 说: [回复]
    十月 30th, 2008 at 19:09

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

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

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

  12. Soloman 说: [回复]
    十月 30th, 2008 at 19:11

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

  13. Soloman 说: [回复]
    十月 30th, 2008 at 19:12

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

  14. Shawn 说: [回复]
    十月 30th, 2008 at 19:13

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

  15. NetPuter 说: [回复]
    十月 31st, 2008 at 12:39

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

  16. 琪琪老爸 说: [回复]
    一月 5th, 2009 at 15:07

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

  17. Soloman 说: [回复]
    一月 6th, 2009 at 21:03

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

  18. 琪琪老爸 说: [回复]
    一月 7th, 2009 at 08:49

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

  19. 老所 说: [回复]
    一月 7th, 2009 at 12:28

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

  20. 琪琪老爸 说: [回复]
    一月 7th, 2009 at 17:25

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

  21. lioz 说: [回复]
    一月 25th, 2009 at 14:58

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

  22. paul 说: [回复]
    六月 12th, 2009 at 23:02

    zhe ge dongxi bucuo de ,hehe

  23. paul 说: [回复]
    六月 12th, 2009 at 23:02

    @paul
    good

  24. holylone 说: [回复]
    六月 24th, 2009 at 13:50

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

  25. bzqoz 说: [回复]
    六月 30th, 2009 at 16:08

    Sex Tape Of Sophie Anderton fbz Roxana Diaz Sex Tape oacys

  26. atbds 说: [回复]
    七月 3rd, 2009 at 11:58

    uporn mpeg free xxx brgvp tiava hogtied movie bwwth

  27. vvupj 说: [回复]
    七月 4th, 2009 at 01:48

    bbwsex4ucom wspnw son of blackzilla qhbf

  28. Mffbkk 说: [回复]
    七月 4th, 2009 at 05:00

    pussy exam
    marge simpson porn
    porn animals
    pregnant lesbian
    porn photos
    pussy teen
    anal probe
    gay teen porn
    ebony phat ass
    ebony ayes video
    wwe lesbian
    xxx lesbian
    yu porn
    asin porn
    nude ebony women

Other Discussion on This Post

  1. 支持 jQuery 的 WordPress 幻灯插件 - WordPress 非官方中文站
    十月 30th, 2008 at 08:37
  2. Carisoprodol.
    一月 25th, 2009 at 15:37

添加评论 (支持Gravatar头像)

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

实时评论预览