magento手动添加silder show

magento图片切换
magento图片切换

在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

《magento手动添加silder show》有16个想法

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

    这个不知道具体怎么操作,

    然后在没有加载那个design的情况下,firefox测试良好,chrome无法正常显示。

      1. 按作者方法做出来的几张图片并列,我的版本是1.9.11,RWD主题中没有Head.html文件,我是从moden这个主题里面复制过来的,加入代码后也没有报错,检查了很多次,是在检查不出有什么问题

  2. 在hellowired模板中找不到/template/page/html/head.phtml 这个页面,就只有header.phtml,但是里面没有你说的getCssJsHtml() ?> ,怎么办?

  3. 你好,我按着您的步骤来的,js 顺序都按您的步骤在prototype的前面,但我运行时报js错误:jQuery(“#slider”).easySlider is not a function
    我看代码没问题的
    我自己建个项目一个html来调用js却能跑起来,实在不知道什么原因

  4. 按照文章的说明上传文件,配置后,刷新,发现图片并列出现在一列,不轮换,不知道为什么,是和其他插件JS冲突了吗?

  5. 按照步骤 图片调出来了,样式 也改了,JS也调用出了,怎么没效果 不动啊 也没小箭头图标

评论已关闭。