使用目录图像作为Magento中的完整背景图像

时间:2010-11-29 23:24:06

标签: magento

我在这里处理的是一个很短的截止日期,所以我会在没有深入研究这个问题的情况下提出这个问题。虽然我认为这是一个很好的问题,可能会引起许多与Magento打交道的人的兴趣。

我被要求在Magento eshop上做一些修改。除其他事项外,我需要使用每个类别的类别图像作为完整的可调整大小的背景图像,使用此(或类似)插件 - http://johnpatrickgiven.com/jquery/background-resize/

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:3)

在主题的布局中添加以下内容local.xml

<layout>
    <catalog_category_default>
        <reference name="before_body_end">
            <block type="catalog/category_view" name="back.image" template="page/html/back.image.phtml" />
        </reference>
    </catalog_category_default>
    <catalog_category_layered>
        <reference name="before_body_end">
            <block type="catalog/category_view" name="back.image" template="page/html/back.image.phtml" />
        </reference>
    </catalog_category_layered>
<layout>

接下来,在主题的模板中创建一个文件page/html/back.image.phtml

<?php if ($this->getCurrentCategory()->getImage()): ?>
<div id="back_frame">
    <img class="back_image" src="<?php echo $this->getCurrentCategory()->getImageUrl() ?>" alt="<?php echo $this->getCurrentCategory()->getName() ?>" />
</div>
<?php endif ?>

最后在主题的CSS中添加这样的内容。

.page {
    position: relative;
}
#back_frame {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}
#back_image {
    width: 100%;
}

我实际上没有测试任何这个,但看起来很简单。当然,需要javascript太简单了!