Magento media.phtml产品<img>有style =“top：”？

Question

I wanted to move the product.info.media block from the catalog.xml in the left column for all product view.

To achive this, i have added two lines to my local.xml file:

<catalog_product_view>
    <reference name="left">
        <block type="catalog/product_view_media" name="product.info.media" as="media" template="catalog/product/view/media.phtml"/>
    </reference>
    <reference name="product.info">
        <action method="unsetChild"><child>media</child></action>
    </reference>
</catalog_product_view>

The media.phtml is binary identical with the default file from the 1.7.0.2 version of magento.

The strange thing is, that the product image on the webpage has this code:

<img id="image" src="path/to/image.jpg" alt="" title="" style="position: relative; left: 0px; width: 220px; top: 215px;">

Why is there a style defined for top?! As this style is defined inside the element i can't even change it with css. Could anyone explain this behaviour of magento?

The lines in the media.phtml which are creating this look like this:

    $_img = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
    echo $_helper->productAttribute($_product, $_img, 'image');

They lead me to app/code/core/Mage/Catalog/Helper/Output.php where the productAttribute function is defined. But why for heavens sake is the top style set? It makes no sense at all. If i wanted to set it i would use css.

Thanks in advance.

Answer 1

I just spent the past 3 hours banging my head against this problem... The solution? The element style (including 'top') is set in (drumroll) /js/product.js. This is part of the default image zoom operation. Hope this helps anyone out there who comes across this post through Google like I did.

In magento 1.7.2, line 263 of /js/product.js shows:

this.imageEl.style.top = this.imageY+'px';

As a quick hack you can comment it out, but I highly recommend adapting a zoom javascript functionality that suits your needs.