製品ビューmagentoで画像を呼び出す方法は？

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

私はuがその

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

のように宣言されたファイル

アプリ\設計\フロントエンド\ベース\デフォルト\テンプレート\カタログ\製品\ビュー

&をチェックしなければならないと思います

このファイルは、メイン画像&にもギャラリー画像を提供します。もちろん、有効になっている画像のみを取得します。 次のコメントからわかるように。ファンシーボックスでこれらの画像が必要です。次はスライドショーのようなものが必要です。

okここではできることです。

に

の下に新しいファイルを作成するには、アプリの\設計\フロントエンド\ベース\デフォルト\テンプレート\カタログ\製品\ビュー\のfancy.media.phtml

（またはuは/ウルテーマフォルダの代わりにベースを使用することができますウルのcatalog.xmlのデフォルト）

はu'llすべての画像&そこURLを取得media.phtmlになりまし

<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"/> 

の下で、このブロックを追加します。 fancybox &に画像URLを渡してください。 & &ええウルの製品ページすなわち アプリ\設計\フロントエンド\ベース\デフォルト\テンプレート\カタログ\製品で、このブロックを呼び出すことを忘れないでください\ view.phtml

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

によってI fancy.mediaでこれを試してみてください

：これは問題

UPDATEを解決しなければなりません願っています。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を編集する必要はありません。

これをうまく動作させると、私の答えを受け入れることができます。

Answer 3

okこれはurのトラブルを節約できると思います。

はウルのメイン画像領域が、これは役立つはず<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> 

希望であると言うことができますITはくそ簡単... ​​

Answer 4

私は、メディア上のボタンを追加することにより、目的の結果を得ました。 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>