Question

我想调用加载到magento产品页面的较大视图区域的图像。

在产品视图页面中，单击时我有更多的视图图像，它在较大的视图中显示图像，而不是在默认的弹出窗口中。我想调用在较大视图区域中加载图像的全尺寸图像。有人可以告诉我该怎么办？

我做了一些搜索并找到了

echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(163, 100);

但是这只能获得默认情况下的图像。我希望能够调用更大视图区域中的任何图像。

Answer 1

试试这段代码

$this->helper('catalog/image')->init($_product, 'image')

这将为您提供产品视图页面上的图像。

Answer 2

好吧我认为这可以省去你的麻烦。这很容易

假设您的主要图片区域为<img id="main-image" src="main-image.jpg" />

 <?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
    <a class="grouped_elements" href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(260,null) ?>"
       title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" rel="group1">

        <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(70,null) ?>"
             width="70"  alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
    </a>
</li>

<script type="text/javascript">
//<![CDATA[
    jQuery("a.grouped_elements").click(function(){

           $('#main-image').attr('src', this.attr('href'));

    });

//]]>
</script>

希望这应该有帮助...

Answer 3

我想你必须检查文件

应用\设计\前端\基\默认\模板\目录\产品\视图

＆安培;它在
中声明
<block type="catalog/product_view_media" name="product.info.media" as="media" template="catalog/product/view/media.phtml"/>

这个文件给你主图像＆amp;还有画廊图片。当然，你只会获得启用的图像。所以我从随后的评论中理解了什么。你需要在fancybox中使用这些图像。必须有一个幻灯片放映的东西，接下来等等吗？

ok这是你能做的。在
下创建一个新文件
app \ design \ frontend \ base \ default \ template \ catalog \ product \ view \ fancy.media.phtml

（或者您可以使用ur主题文件夹而不是base / default）
在 catalog.xml 中
在
下添加此块
<block type="catalog/product_view_media" name="product.info.media" as="media" template="catalog/product/view/media.phtml"/> <block type="catalog/product_view_media" name="fancy.media" template="catalog/product/view/fancy.media.phtml"/>

现在在media.phtml中你会得到所有的图像＆amp;有网址。编码fancybox＆amp;将图片网址传递给它。＆安培; ＆安培;是的，不要忘记在您的产品页面中调用此块，即 应用\设计\前端\基\默认\模板\目录\产品\ view.phtml

echo $this->getChilHtml('fancy.media')

我希望这必须解决问题

更新：

在fancy.media.phtml中试试这个：

<?php foreach ($this->getGalleryImages() as $_image): ?> <li> <a class="grouped_elements" href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(260,null) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" rel="group1"> <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(70,null) ?>" width="70" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /> </a> </li> <?php endforeach; ?> <script type="text/javascript"> //<![CDATA[ $("a.grouped_elements").fancybox(); //]]> </script>

请参阅fancybox的文档，fancybox how to

我认为你的要求是，如果有人点击产品页面上的更多视图，它必须在fancybox中打开。对？？所以你也可以把这个代码放在media.phtml中。无需创建新文件＆amp;无需编辑catalog.xml。

如果你让这个工作，那么随时接受我的回答。

Answer 4

我通过在media.phtml上添加一个按钮获得了所需的结果

<a class="fullscreen" href="#image" onclick="document.getElementById('image').style.width='100%'; return false; " > <img  src="<?php echo $this->getSkinUrl('images/zoom_full.jpg') ?>" alt="<?php echo $this->__('Full Screen') ?>" title="<?php echo $this->__('Full Screen') ?>" /></a>

<script type="text/javascript">  j(document).ready(function() {
j(".fullscreen").fancybox({ 'transitionIn': 'fade', 'transitionOut':
'none', 'overlayColor': '#fff', 'overlayOpacity':1,
'hideOnOverlayClick':false }); </script>

如何在产品视图magento中调用图像？

4 个答案: