How to open an image in the same product page of Magento

Note: This has been tested on Magento 1.4.2.0

No popup window with the image nor the single image alone in the same page.

If you want to replace the large image with the image displayed in the thumbnail when these are clicked, here are the steps to do it:

1. Edit the file media.phtml that you will find in app/design/frontend/[YOUR TEMPLATE]/default/template/catalog/product/view/
2. In the final line add a new one and copy/paste the following code:

   <script type="text/javascript">
   function imageReplace(newimageURL){
       document.getElementById("pimage").setAttribute('src', newimageURL);
       document.getElementById("pimage").style.width = '100%';
   }
   </script>
            

3. Approximately, on line 62 you will find the following code:

   $_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(425).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'"/>';
   

   Simply add id=”pimage” to the img tag or if preferred replace the whole as follows:

   $_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(425).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" id="pimage" />';
   

4. Approximately, on line 73 you will need to change the onclick action of the a href to call the new javascript function that we added in the step 2.
   Replace:

   <a href="#" onclick="imageReplace('<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>')" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>">
                   <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" width="56" height="56" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
   	        </a>
   

   With:

   <a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" width="56" height="56" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
   

Temgra’s Color All

If you are using Temgra’s Color All with Magento, the solution that you are requiring is a bit different.

1. Edit the file media.phtml that you will find in app/design/frontend/[YOUR TEMPLATE]/default/template/colorall/
2. Approximately, on line 54:

                 <a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" width="56" height="56" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
                

   Replace it with:

                 <a href="#" onclick="imageReplace('<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>')" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" width="56" height="56" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
                

3. In the final line add a new one and copy/paste the following code:

   <script type="text/javascript">
   function imageReplace(newimageURL){
       document.getElementById("image").setAttribute('src', newimageURL);
   }
   </script>