29Mar

下载列表弹窗插件facebox_dlist_show的修改及使用方法

时间: 2013-3-29 分类: WordPress教程 作者: 鱼小委 5476 次浏览

TAGS:

一直在寻找一款比较好用的下载列表弹窗插,之前一直在测试一款名为WP Facebox download的下载弹窗插件,鱼小委用的是win主机可能对这个插件兼容性不是很好,最终调试失败决定放弃。

最后鱼小委锁定了facebox_dlist_show这款下载列表弹窗插件,在这里也对此插件的作者表示感谢,为我们无偿提供了插件的使用。
在调试facebox_dlist_show这款插件的时候,鱼小委也碰到了很多问题:

1.弹窗窗口的大小变形,这是因为此插件跟鱼小委使用的模板存在一定的冲突所引起的。

2.弹出的窗口没有关闭按钮,虽然可以通过使用键盘的ESC按钮来关闭弹窗窗口,可大大降低了用户的体验度。

这两个问题是鱼小委在安装此插件时碰到的最为关键的问题,今天我在这里分享给大家如何解决这两个问题,希望给已经在使用或正打算使用此插件的站长们提供一些参考。

首先,调整facebox_dlist_show下载列表弹窗插件弹出窗口的大小

1.我们在插件目录中找到facebox_dlist_show.css文件,插件目录地址:yoursite.com/wp-content/plugins/facebox_dlist_show/

打开查找以下代码

#facebox .content {
  display:table;
  padding: 10px;
  background: #fff;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
  border:3px solid #999;
}

在此代码中插入一个width属性,如下代码

#facebox .content {
  display:table;
  width:728px;
  padding: 10px;
  background: #fff;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
  border:3px solid #999;
}

这里我将width定义为728px是因为,这样可以插入一个728*90的淘宝橱窗广告,当然大家如果有需要修改弹窗大小,可以根据自己的需要修改width的值。

其次,我们为facebox_dlist_show插件添加弹窗窗口的close关闭按钮

1.我们通过ftp软件将关闭按钮图片closelabel.gif上传到插件根目录中。

注:文章最后会提供图片的下载。

2.再次在插件目录中打开facebox_dlist_show.css文件,查找以下代码:

#facebox .close{
  position:absolute;
  top:5px;
  right:5px;
  padding:2px;
  background:#fff;
}

将以上代码替换为以下代码:

#facebox .close{
  position:absolute;
  right:10px;
  bottom:-30px;
  padding:33px;
  background-image:url(closelabel.gif);
  background-repeat:no-repeat;
}

这边由于鱼小委的下载弹窗窗口长度为728px,并且close按钮放在下载弹窗窗口的右下角,因此这里的right、bottom、padding三个CSS属性为以上代码中的值,如果大家定义的弹窗窗口长度为其他值,自己修改调试right、bottom、padding这三个属性的值即可。

最后我们来看下效果图:

插件使用方法

在文章中插入短代码,格式如下(使用时把下面的*号去掉,切记!!!):
[*dls did="自定义值" t="要显示的链接文字"]<*a herf=”这里插入你的下载链接” targer=”_blank”> 下载框名称<*/a>[*/dls]
如本文的下载:
[*dls did="cj1" t="close图片及插件"]<*a href=”文件的下载链接” target=”_blank”>close图片下载<*/a>[*/dls]
注:
1.did=”自定义值” 这里的自定义值只是一个称号,比如你提供的下载内容为软件,那你的自定义值就可以设定为soft,did=”soft”
2.did里面的自定义值不要出现空格或者中文字符,不然无法生效。

本文章中所提到的closelabel.gif图片下载以及facebox_dlist_show下载弹窗插件下载

本文作者:

热衷于学习基于WordPress平台的网站设计与开发,狂热的IT工作者,热爱生活。我要投稿

喜欢我们的文章请您与朋友分享:

更多

相关文章:

Comments

目前有 7 条精彩评论

  1. catmark521 发表于: 2013 年 4 月 19 日 17:16:10

    装上这个插件后,会与现在用的主题产生冲突,一些JS不再生效,请问有什么解决拌饭吗?

    • 鱼小委 发表于: 2013 年 4 月 20 日 13:20:10

      嗯,这个插件的兼容性不是很好,这要根据你的主题安装好插件后实际去一点点调试了。
      你也可以试一下wp facebook download这个插件,跟我用的这个效果差不多的。

      • catmark521 发表于: 2013 年 4 月 21 日 21:08:15

        可以加你的QQ吗?博主,想和你沟通一下!

        • 鱼小委 发表于: 2013 年 4 月 22 日 20:08:13

          我已经加你Q了!

        • catmark521 发表于: 2013 年 4 月 22 日 21:43:18

          感谢鱼小委,问题已经解决,非常好的人!大恩不言谢!

  2. gordon 发表于: 2013 年 3 月 31 日 18:01:21

    想请教下博主,你有没有遇到过不能弹出的问题呢?

    • 管理员

      鱼小委 发表于: 2013 年 4 月 1 日 11:24:25

      这个我倒没碰到过,我估计是根你的主题css样式有冲突,你网站是多少,我可以帮你看看,不过不一定能够解决啊。呵呵。

Comments
发表评论

电子邮件地址不会被公开。*标记为必填选项

  • 正确格式为: http://www.huangjianwei.com.cn

按 [ Ctrl+Enter ] 键直接提交

返回顶部