CODEWITHSUNDEEP
magentozooming
tokmak
tokmak

Reputation: 459

Magento remove zoom from product image

Im not really familiar with Magento and i need to remove zoom effect from product image. This is the code from /catalog/product/view/media.phtml inside template directory.

I tried to play around with if-else statement, but it seems im missing something because i am getting errors.

Is anybody more familiar with this to take a look? Thanks a bunch!

    <div class="product-image">
<?php if ($scrollStatus): ?>
    <div id="jp-container" class="jp-container" style="height:500px;">
        <a href="javascript:void(0);"><?php
            $_img = '<img src="'.$helpImg->getImg($_product, 'image', $imgSize, null).'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->escapeHtml($this->getImageLabel()).'" />';
                echo $_img;
        ?></a>
        <?php foreach ($this->getGalleryImages() as $_image): ?>
            <a href="javascript:void(0);" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile()); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
        <?php endforeach; ?>
    </div>
    <script type="text/javascript">
    jQuery(window).load(function(){
        function jspaneStart(){
            setTimeout(function(){
                maxHeight = 0;
                jQuery('#jp-container a').each(function(){
                    if(jQuery(this).height() > maxHeight){
                        maxHeight = jQuery(this).height();
                    }
                });
                maxHeight = maxHeight+(maxHeight/100)*<?php echo $scrollimagesHeight; ?>;
                jQuery('#jp-container').css('height', maxHeight);
                jQuery('#jp-container').jScrollPane();
            }, 500);
        }
        jspaneStart();
        jQuery(window).resize(function(){
            jspaneStart();
        });
    });
    </script>
<?php else: ?>
    <a id='zoom' class="cloud-zoom" data-zoom="showTitle: false, adjustX: -5, adjustY:-5, tint: '#fff', tintOpacity:0.6, position:'inside'" href="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>"><?php
            $_img = '<img id="image" src="'.$helpImg->getImg($_product, 'image', $imgSize, null).'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->escapeHtml($this->getImageLabel()).'" />';
                echo $_helper->productAttribute($_product, $_img, 'image');
        ?></a>
        <?php /* Label New */ echo MAGE::helper('ThemeOptionsMinimalism')->getProductLabels($_product); ?>

    <?php if (count($this->getGalleryImages()) > 0): ?>
    <div class="more-views-container">
        <div class="more-views<?php if ($productpage_moreviews == 'moreviews_slider' && count($this->getGalleryImages()) > 3){echo ' slider-on';} ?>">
            <h2><?php echo $this->__('More Views') ?></h2>
            <?php if ($productpage_moreviews == 'moreviews_slider' && count($this->getGalleryImages()) > 3): ?>
            <div id="more-views-slider" class="es-carousel-wrapper">
                <ul class="carousel-ul">
                <?php foreach ($this->getGalleryImages() as $_image): ?>
                    <li>
                        <a class='cloud-zoom-gallery' data-zoom="useZoom: 'zoom', smallImage: '<?php echo $helpImg->getImg($_product, 'thumbnail', $imgSize, null, $_image->getFile()); ?>' " href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile()); ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img <?php echo $helpImg->getImgSources($_product, 'thumbnail', 200, null, $_image->getFile()); ?> alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
                    </li>
                <?php endforeach; ?>
                </ul>
            </div>
            <div class = 'next'><i class="fa fa-angle-right"></i></div>
            <div class = 'prev unselectable'><i class="fa fa-angle-left"></i></div>
            <?php else: ?>
            <ul class="no-slider">
                <?php foreach ($this->getGalleryImages() as $_image): ?>
                    <li>
                        <a class='cloud-zoom-gallery' data-zoom="useZoom: 'zoom', smallImage: '<?php echo $helpImg->getImg($_product, 'thumbnail', $imgSize, null, $_image->getFile()); ?>' " href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile()); ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img <?php echo $helpImg->getImgSources($_product, 'thumbnail', 200, null, $_image->getFile()); ?> alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
                    </li>
                <?php endforeach; ?>
            </ul>
            <?php endif; ?>
        </div>
    </div>
    <?php endif; ?>
<?php endif; ?>
<?php if ($this->displayProductStockStatus()): ?>
    <?php if ($_product->isAvailable()): ?>
       <p class="availability in-stock"><i class="fa fa-check"></i><?php echo $this->__('In stock') ?></p>
    <?php else: ?>
       <p class="availability out-of-stock"><i class="fa fa-times"></i><?php echo $this->__('Out of stock') ?></p>
    <?php endif; ?>
<?php endif; ?>
</div>

Upvotes: 1

Views: 13611

Answers (4)

Roshni
Roshni

Reputation: 325

This answer worked for me:

Add JS in media.phtml in your theme.

// ProductMediaManager is outside document.read scope
    if (typeof ProductMediaManager !== 'undefined') {

      // Override image zoom in /skin/frontend/rwd/default/js/app.js
      // and prevent the zooming of images on hover
      ProductMediaManager.createZoom = function(image) { return; }

    }

I have found the answer form here

Thanks "Patrick Ward" for the great and simple Solution...

Upvotes: 0

Smeagol
Smeagol

Reputation: 81

You could always try disabling the module completely via the module's xml file in app/etc/modules

Your xml file that relates to the zoom module will look something like this:

<?xml version="1.0" encoding="utf-8"?>
<config>
    <modules>
        <module_name>
            <active>true</active>
            <codePool>community</codePool>
        </module_name>
    </modules>
</config>

Simply set active to false

Upvotes: 0

Anju Aravind
Anju Aravind

Reputation: 3362

Go to Admin, then to System -> Configuration.Then go to Manage -> Advanced -> Disable Modules Output -> EcommerceTeam_CloudZoom -> Disable. Click Save Config.

then Go to 

System -> Configuration ->Catalog

On the next page under Cloud Image Zoom you will find a list of options to configure the module. Enable Cloud Zoom – when no is selected, the option disables the Cloud Zoom in your product images.

Click ‘Save Config’ at the top right when you are done.

Upvotes: 0

Mufaddal
Mufaddal

Reputation: 5381

You can disable zoom from magento js. just locate this file js\varien\product.js and comment this line 

Event.observe(this.imageEl, 'dblclick', this.toggleFull.bind(this));

this line is responsible for image zoom by default.

Upvotes: 1

Related Questions