2011-12-18 69 views
2

我想调用加载到Magento的产品页面的大背景区域的图像。如何在产品视图中调用图像magento?

在产品视图页面,点击后我有更多的观看图像,显示在较大的视图中的图像,而不是默认的弹出窗口。我想调用大图视图中加载的任何图像的全尺寸图像。有人能告诉我我该怎么做?

我做了一些搜索,发现

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

但这只能得到这是有默认的图像。我希望能够调用放大视图区域中的任何图像。

回答

2

试试这个代码

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

这将让你的产品视图页上的图像。

+0

它仅返回基本图像,其中a当我点击更多的视图图像时,我想调用出现的每个图像。例如,在产品“衬衫”上,我有基本图像“A”,并且我有更多视图图像“B”,“C”和“D” 。使用上面提供的代码,它只会调用基本图像“A”。如果用户点击更多的视图图像“B”,“C”或“D”会怎么样? – squizeers 2011-12-18 02:58:08

+0

foreach($ product-> getMediaGalleryImages()as $ image){echo var_export($ image-> getUrl()); },这会给你产品的所有图像 – 2011-12-18 03:08:46

+0

感谢您的回复,但它给了我一个错误“致命错误:调用一个非对象的成员函数getMediaGalleryImages()”。实际上我不想要所有的图像。我想要在产品大视野区域拥有图像。随着用户点击moreview图像,图像会随之改变。所以我看到的代码应该给我更多的视图图像“B”,“C”和“D”只有当他们是活跃的网址。 – squizeers 2011-12-18 03:40:28

0

我觉得你必须检查文件

应用程序\设计\前台\基地\ DEFAULT \模板\目录\产品\图

&其声明为

<block type="catalog/product_view_media" name="product.info.media" as="media" template="catalog/product/view/media.phtml"/> 

这个文件不仅可用,也可以使用图片库&。当然你会得到只有启用的图像。 所以我从后续的评论中了解到。你需要在fancybox这些图像。前面一定要有幻灯片放映等等等等吧?

确定这是什么ü可以做。创建下

应用程序\设计\前台\基地\ DEFAULT \模板\目录\产品\图\ fancy.media.phtml一个新的文件

(或U可以使用乌尔主题文件夹,而不是基地/默认情况下)

在乌尔的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现在添加此块日子会把你得到的所有图像&存在的URL。代码花式框&传递图像的URL到它。 & &呀,不要忘记即 应用程序\设计\前台\基地\ DEFAULT \模板\目录\产品

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

I \ view.phtml调用此块乌尔产品页面希望这个必须解决的问题

UPDATE:

在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中。无需创建新文件&无需编辑catalog.xml。

如果你让这个工作,然后随时接受我的答案。

+0

我会试试这个。听起来像是更好的解决方案。我需要在FANCY.MEDIA.PHTML中做什么?我的意思是这个文件中的代码是什么?谢谢。我会让你知道的。 – squizeers 2011-12-18 06:27:29

+0

@squizeers我已经更新了我的答案。 – SAM 2011-12-18 06:46:02

+0

我这样做和结果就像从一个插件,并没有解决问题。它列出了所有更多的视图图像。当点击它,它弹出在lightbox.I正在寻找像magento扩展的产品页面 – squizeers 2011-12-18 16:31:31

1

好的我认为这可能会挽救我们的麻烦。的ITs该死容易

比方说,乌拉圭回合的主图像区域是<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> 

希望这将有助于...

0

我通过增加对媒体的按钮得到期望的结果。 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> 
相关问题