如何用 highslide 代替默认Magento 图片放大器

发表 于 2010年8月26日 在 Magento教程 | 1 评论

这里是用 highslide 替换 Magento 默认 图片放大器的全部步骤：

1.  去官方网站下载highslide 最新版，下载地址：http://highslide.com/download.php

2.  打开刚刚下载的 highslide压缩包，把里面 “highslide” 文件夹上传到你的Magento网站的下面目录： ‘skin/frontend/default/[你的模板目录]/

3.  备份文件 ‘app/design/frontend/default/[你的模板目录]/template/catalog/product/view/media.phtml’, 然后从本站下载新的 media.phtml 文件上传到 app/design/frontend/default/[你的模板目录]/template/catalog/product/view/，下载media.phtml

4. 把下面代码添加到 ‘app/design/frontend/default/[你的模板目录]/template/catalog/product/view.phtml的最前面：

<!-- Initiate Highslide -->
<script type="text/javascript" src="<?php echo $this->helper('core/js')->getJsSkinUrl('')?>highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo $this->helper('core/js')->getJsSkinUrl('')?>highslide/highslide.css" />

<script type="text/javascript">
    hs.graphicsDir = '<?php echo $this->helper('core/js')->getJsSkinUrl('')?>highslide/graphics/';
    hs.showCredits = false;
    hs.align = 'center';
    hs.transitions = ['expand', 'crossfade'];
    hs.outlineType = 'rounded-white';
    hs.fadeInOut = true;
    //hs.dimmingOpacity = 0.75;

    // 11c3bce867cc0baf47f1bb002e14f0e5

    // Add the controlbar
    hs.addSlideshow({
        //slideshowGroup: 'group1',
        interval: 3000,
        repeat: false,
        useControls: true,
        fixedControls: 'fit',
        overlayOptions: {
        opacity: .75,
        position: 'bottom center',
        hideOnMouseOut: true
        }
    });
</script>

5. 把Magento cache刷新一下，全部完成。