How to call the image in the product view magento? - image

Question

I want to call the image that loads into the larger view area of the magento product page.
In the product view page, I have more view images when clicked, it shows the image in the larger view, not in default pop up window. I want to call the full size image of whatever the image is loaded in the larger view area. Can someone tell me how do I do it?
I did some search and found
echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(163, 100);
But this gets only the image which was there by default. I want to be able to call any image that comes in the larger view area.

Answer 1

try this code
$this->helper('catalog/image')->init($_product, 'image')
this will get you the image on product view page.

Answer 2

ok I think this might save ur trouble. ITs Damn easy
Lets say ur main image area is <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>
Hope this should help ...

Answer 3

I think u must check the file
app\design\frontend\base\default\template\catalog\product\view
& its declared as in the
<block type="catalog/product_view_media" name="product.info.media" as="media" template="catalog/product/view/media.phtml"/>
this file gives u the Main Image & also the Gallery Images. of course u'll get only enabled images.
so What I understand from the subsequent comments. u need these images in a fancybox. there has to be a slideshow thing previou next etc. right??
ok Here it is what u can do. Create a new file under
app\design\frontend\base\default\template\catalog\product\view\fancy.media.phtml
(or u can use ur theme folder instead of base/default)
in ur catalog.xml add this block under
<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"/>
now in media.phtml u'll get all the images & there URLs. code the fancybox & pass the image url to it. &
& yeah don't forget to call this block in ur product page i.e.
app\design\frontend\base\default\template\catalog\product\view.phtml
by echo $this->getChilHtml('fancy.media')
I hope this must solve problem
UPDATE:
try this in 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>
Please refer to the Docs of fancybox, fancybox how to
I think ur requirement is if somebody clicks on the More-views on product page it must get open in fancybox. Right?? so u can place this code in media.phtml also. no need to create a new file & no need to edit the catalog.xml.
If u make this working then feel free to accept my answer.

Answer 4

I got the desired result by adding a button on 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>