images are being strethced in magnifier

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