为你的wp制作旋转木马图片链接展示页面 » 荒野无灯weblog

Keep It Simple, Stupid.

荒野无灯weblog

为你的wp制作旋转木马图片链接展示页面

呵呵,写这篇文章源于Willin的一篇文章《旋轉木馬圖片展示功能》,Willin童鞋只介绍了下这个javascript ,喜欢折腾的我觉得,如果只是用HTML来弄个页面,太麻烦了,每次增加或者修改链接都要重新编辑文件,于是用PHP写了个东东。

demo : http://www.ihacklog.com/links

功能:
旋转木马图片链接展示页面模板,将此模板放到当前模板目录中,在后台选中该模板发布页面即可。
可随时修改、添加、删除链接和图片。相当方便。

先上图,有图有真相:

添加图片和网址的方法:

注意:不要将图片插入文中!
添加图片后将标题修改为网址,
下面的“标题”和”描述“ 分别填网站的title和网站描述.
修改完后点“保存所有更改” 这个按钮即可。

相关文件下载:

slidelinkpageshow.zip (3.2 KB)

放到你当前所用主题目录下面,然后把placeholder.gif这个图片放在你当前所用主题的images目录下面,

后台新建一个页面,在右角处选择模板为SlideshowLinks ,页面内容如下(注意大小写要一致,每行一条,以分号结束):

Max_Number=30;
Car_Image_Width=300;
Car_Image_Height=253;
Car_Speed=4;
Car_NoOfSides=8;

参数解释:

Max_Number表示最多显示多少个链接;
Car_Image_Width 宽
Car_Image_Height 高
Car_Speed 旋转速度
Car_NoOfSides 多少面 (必须为 4 ,6 ,8 ,12 之一!)

注意事项:
这个东东要在加载了jQuery库 的前提下才可运行,如果你的博客没有加载jQuery库,请:

方法一:
给body标签添加onload事件:

body onload="Carousel()"

然后将这些代码:


var j = jQuery.noConflict();  
      j(document).ready(function()
      {  
        Carousel();  
      });  
j("#linklist ol li a").each(function(e){
j(this).prepend("");
}); 

EOT;
//$buffer=ob_get_contents();
$buffer=str_replace('',$append_js.'',$buffer);
  return $buffer;
}

ob_start("callback");
get_footer();

ob_end_flush();
?>

替换为:


或者
方法二:加载jQuery库

Tagged in : 原创,旋转木马,链接,javascript

All Comments (0)
Gravatar image
No Comments