1 min read

Magento 幻灯片

如果要在 Magento 主页上添加幻灯片(slideshow)效果,技术上也是比较简单的。这一节所用的材料如下:

  1. jQuery
  2. Craftyslide

注:jQuery 有许多做幻灯片的插件,Craftyslide 只是一例。

添加 jQuery

首先,需要给 Magento 的主页添加 jQuery 支持,按照给 Magento 添加 jQuery 一篇中的说明,打开 CMS -> Pages -> Home page,将下段代码添加到 Design 标签下的 Layout Update XML 里:

<reference name="head">
   <action method="addItem">
       <type>skin_js</type>
       <name>js/jquery.js</name>
   </action>
</reference>

引用 Craftyslide 相关文件

下载 Craftyslide,然后将相应文件解压到相应位置,然后在上面一个步骤代码中加入如下内容:

skin_js js/craftyslide/js/craftyslide.js skin_css css/craftyslide.css

这样我们在主页里调用 craftyslide 的 js 文件,并应用它的样式。

添加幻灯片内容

然后该是添加幻灯片内容。打开 Home page 页,在 Content 中添加如下:

<div id="slideshow">
<ul>
<li><img src="{{skin url='images/slider/nemo.jpg'}}" alt="" /></li>
<li><a href="http://www.zfanw.com/blog"><img title="#htmlcaption" src="{{skin url='images/slider/toystory.jpg'}}" alt="" /></a></li>
<li><img title="This is an example of a caption" src="{{skin url=images/slider/up.jpg}}" alt="" /></li>
<li><img src="{{skin url='images/slider/walle.jpg}}" alt="" /></li>
</ul>
</div>

执行幻灯片效果

根据插件的使用说明,可以新建一个 slideshow.js 文件,用于执行幻灯片效果,内容如下:

var $j=jQuery.noConflict();
$j(window).load(function() {
    $j("#slideshow").craftyslide();
});

然后在1步骤的 reference 里添加如下:

skin_js js/craftyslide/slideshow.js

这样就可以在主页调用该执行代码。

保存后再刷新网页,已经有下图中的幻灯片效果:

Magento 幻灯片

当然,上面的方法是直接把幻灯片内容代码写入 Magento 主页内容中,也可以创建一个 Static Blocks,然后再从主页内容里以如下形式引入静态块:

{{block type="cms/block" block_id="slider-show"}}

这个就看个人喜好了。

报告问题 修订