2011-12-18 68 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> 
相關問題