I uploaded multiple images to my demo and the magnifier seems to be showing images stretched (horizontally).
Same problem can be seen in demo
http://jm-casual.demo.joomlart.com/m…rat-velit.html
1. In product details page. Use the maginfier on the first main image and its ok
2. select a second image and try the magnifier. The image in the right hand magnifier window is stretched.
3. Go back and select the first main image and use the magnifier, again the image in the right hand window is stretched.
4 answers
Thanks for your report. To get it fix, please open file \app\design\frontend\default\jm_casualtemplate\ca talog\product\view\media.phtml:
At line 52, replace this rule:
Code:
<p class="product-image product-image-zoom img-desktop" style="<?php echo 'width:'.$productlimagewidth.'px; height:'.$productlimageheight.'px;'; ?>"> <?php $main_image_name= strrchr($_product->getImage(), '/'); if (count($galleryImages)>0){ foreach ($galleryImages as $_image){ $thumb_image_name= strrchr($_image->getFile(), '/'); if($main_image_name == $thumb_image_name){ $_img = '<img id="image" src="' . $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize ( $productlimagewidth, $productlimageheight ) . '" data-zoom-image="' . $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize (1000,1000 ) . '" alt="' . $this->htmlEscape ( $this->getImageLabel () ) . '" title="' . $this->htmlEscape ( $this->getImageLabel () ) . '" />'; break; } } } if (!isset($_img)) $_img = '<img id="image" src="' . Mage::getModel('catalog/product')->getImageUrl($productlimagewidth, $productlimageheight) . '" data-zoom-image="' . $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize ( $productlimagewidth, $productlimageheight ) . '" alt="' . $this->htmlEscape ( $this->getImageLabel () ) . '" title="' . $this->htmlEscape ( $this->getImageLabel () ) . '" />'; echo $_helper->productAttribute ( $_product, $_img, 'image' ); ?> </p>
With:
Code:
<p class="product-image product-image-zoom"> <?php $_img = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->escapeHtml($this->getImageLabel()).'" />'; echo $_helper->productAttribute($_product, $_img, 'image'); ?> </p>
At line 97, replace this rule:
Code:
<li class="<?php if ($thumb_image_name==$main_image_name){ $start= $i;echo(active);}?>"> <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize ( $productlimagewidth, $productlimageheight ); ?>" title="<?php echo $_product->getName();?>" onclick="return false;"> <!-- The below should remain the same as before --> <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->keepAspectRatio(true)->resize(76, 100); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /> </a> </li>
With:
Code:
<li class="<?php if ($thumb_image_name==$main_image_name){ $start= $i;echo(active);}?>"> <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" title="<?php echo $_product->getName();?>" onclick="return false;"> <!-- The below should remain the same as before --> <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->keepAspectRatio(true)->resize(76, 100); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /> </a> </li>
Hope this helps.
Hi This corrected the stretching. But introduced another issue.
Everything is fine when viewed on desktop. Problemin tablet or mobile view.
On the mobile there are 2 images. The top image STILL has zoom capability and when you hold the mouse over it it showns the zoomed image on the right. I think this top image should not appear on mobiles.
Please see attached screenshot. This is when the screen is reduced for mobiles or tablet.Attachment 40074
My bad, I missed a class for responsive when give you solution. To get the fix, please open file \app\design\frontend\default\jm_casualtemplate\ca talog\product\view\media.phtml, replace this rule:
Code:
<p class="product-image product-image-zoom"> <?php $_img = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->escapeHtml($this->getImageLabel()).'" />'; echo $_helper->productAttribute($_product, $_img, 'image'); ?> </p>
With:
Code:
<p class="product-image product-image-zoom img-desktop"> <?php $_img = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->escapeHtml($this->getImageLabel()).'" />'; echo $_helper->productAttribute($_product, $_img, 'image'); ?> </p>
Thank you that worked perfectly
This question is now closed