magento手动添加silder show

在magento的首页往往有如上图的图片切换效果，英文叫“silder show”或者“gallery”，中文可能叫“画廊”“图片切换”。今天我们来给magento的首页添加一个基于jquery的silder。过程如下，代码包在文章最后面下载。

此silder show来自：www.hellothemes.com 的hellomini模板

1.将代码包解压缩，将silder文件夹上传至：skin/frontend/default/你的模板文件夹/   。图片在silder/images文件中，如果要换成别的图，请将其替换掉。

2.由于要在magento中使用jquery，考虑到js的兼容，所以本silder show的jquery js加载要放在prototype的前面，打开你的模板文件：app/design/frontend/default/你的模板文件夹/template/page/html/head.phtml 找到 <?php echo $this->getCssJsHtml() ?> 在其上面添加如下代码（注意：是在它的上面一行添加），然后保存。

<script type="text/javascript" src="<?php echo $this->getSkinUrl('silder/js/jquery.js') ?>" ></script>
<script type="text/javascript" src="<?php echo $this->getSkinUrl('silder/js/slider.js') ?>" ></script>
<script type="text/javascript">
jQuery(document).ready(function(){
 jQuery("#slider").easySlider({
 auto: true,
 continuous: true
 });
});
</script>

3.进入magento后台 CMS ->Page -> homepage 也就是你的首页的页面

在conten中添加如下代码，添加代码前，请先关闭编辑器。

<div id="slider-wrapper">
<div id="slider">
<ul>
<li><img src="{{skin url='silder/images/01.jpg'}}" alt="" /></li>
<li><img src="{{skin url='silder/images/02.jpg'}}" alt="" /></li>
<li><img src="{{skin url='silder/images/03.jpg'}}" alt="" /></li>
<li><img src="{{skin url='silder/images/04.jpg'}}" alt="" /></li>
<li><img src="{{skin url='silder/images/05.jpg'}}" alt="" /></li>
</ul>
</div>
</div>

代码说明：url图片的路径就在你上传的silder/images文件夹中，为了SEO请为每张图书写alt内容。

在design的Layout Update XML中添加如下代码

<reference name="head">
    <action method="addCss"><stylesheet>silder/css/screen.css</stylesheet></action>
</reference>

代码说明：加载css样式文件

4.刷新magento缓存，去首页看下效果吧，如有问题请检查是否js，css，图片是否均加载。

本文使用文件包点此下载：magento silder show

本次使用magento1.5作为讲解，其他版本可能有细微差别。本文操作需要有一定的css基础，可能需要根据实际情况修改样式文件。

转载表明出处：www.hellokeykey.com