Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Page 1 of 2
how to disable the image zoomer? and just have a normal image display? 
 
SimpleHelixcom
Enthusiast
 
Avatar
Total Posts:  906
Joined:  2007-08-31
Huntsville, AL
 

how can i just disable the zooming image on product detail page?

 
Magento Community Magento Community
Magento Community
Magento Community
 
jmayer
Jr. Member
 
Total Posts:  21
Joined:  2007-09-03
 

Has anyone found a solution to this? This is something I need to do as well.

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

This is what I did:  in the “template > catalog > product > view.phtml

See the highlighted part (includes the drawer on the right) in attached screen shot. Bascially you remove the code from line 35 to 46.

Just in case you may change your mind, better keep a original copy though smile

Image Attachments
remove_zoom.png
 
Magento Community Magento Community
Magento Community
Magento Community
 
mrbrett
Jr. Member
 
Total Posts:  12
Joined:  2007-11-09
 

instead of deleting.. can i just comment it out. ??

Also, If the image zoom is gone, I believe we would also need to do something about the product image size…

these are just my notes so far about what to do with the ZOOM as well as the Pop-up.. I don’t like how the pop-up box is so much bigger than the image that is shown within.

INTERNAL CATALOG PAGE:

view.phtml

to delete the ZOOM tracker
.. delete:

<
div id="track_outer" class="image-zoom">
                <
img class="btn-zoom-out" alt="Zoom Out" src="http://dresscodesatl.com/magento/skin/frontend/default/default/images/slider_btn_zoom_out.gif" id="zoom_out"/>
                <
div id="track">
                    <
div id="handle" class="selected" style="left: 54px;"/>
                </
div>
                <
img class="btn-zoom-in" alt="Zoom In" src="http://dresscodesatl.com/magento/skin/frontend/default/default/images/slider_btn_zoom_in.gif" id="zoom_in"/>
            </
div>
            <
script type="text/javascript">
                
Event.observe(window'load', function() {
                    product_zoom 
= new Product.Zoom('image''track''handle''zoom_in''zoom_out');
                
});
            
</script>

CHANGE 
<<-- this changes the image so whole thing is shown.

.
product-img-box .main-product-img {boxes.css (line 871)
border:1px solid black;
height:375px;
overflow:hidden;
position:relative; <-- delete
width
:265px;
z-index:9;  <<--delete
}


also may need to change STYLE settings on the image
.

this could be useful:

It is possible to change/enlarge the default image dimensions in the product template?
THIS CHANGES THUMBNAIL SIZE!!

/
app/design/frontend/default/template/catalog/product/list.phtml

<?
// Product Image?>
        
<div class="product-image">
            <
a href="<?=$_product->getProductUrl()?>" title="<?=$this->htmlEscape($_product->getName())?>">
                <
img src="<?=$_product->getSmallImageUrl()?>" width="135" height="135" alt="<?=$this->htmlEscape($_product->getName())?>"/>
            </
a>
        </
div



YOU NED TO CHANGE THE POP-up DIMENSIONS TOO.. 
1from page

<a onclick="popWin('http://dresscodesatl.com/magento/catalog/product/gallery/id/155/image/21/', 'gallery', 'scrollbars=yes,width=300,height=300,resizable=yes');return false;" href="#">
                            <
img width="68" height="68" alt="" src="/magento/media/upload/1/image_155_21.jpg"/>
                        </
a>



2>from pop-up

<script type="text/javascript">
1
2Event
.observe(window'load', function(){
var demensions = $('product-gallery-image').getDimensions();
4 window.resizeTo(demensions.width+100demensions.height+160);
5});
6
</script>

change change pop
-up attributes:
.
page-popup {boxes.css (line 1288)
background:#FFFFFF none repeat scroll 0%;
border:1px solid black;  < - i added this
margin
:25px 30px;
}

This seems to be a bit different from what ‘chinesedream’ has done though… right? I haven’t done this yet.. this is just me playing around in FireBug first.

 
Magento Community Magento Community
Magento Community
Magento Community
 
gypsydogg
Jr. Member
 
Total Posts:  22
Joined:  2008-05-17
 

this doesn’t seem to be the right location, anybody have an update for this?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Lance Monotone
Member
 
Avatar
Total Posts:  63
Joined:  2008-04-16
North Adams, MA. 01247
 

It’s in ’app\design\frontend\default\default\template\catalog\product\view\media.phtml‘, although you should copy that file to the same path in your theme, if you don’t know that.

I removed everything from line 28 to 44.

 
Magento Community Magento Community
Magento Community
Magento Community
 
hibs
Jr. Member
 
Total Posts:  4
Joined:  2008-05-21
 
Lance Monotone - 02 June 2008 05:56 AM

It’s in ’app\design\frontend\default\default\template\catalog\product\view\media.phtml‘, although you should copy that file to the same path in your theme, if you don’t know that.

I removed everything from line 28 to 44.

This is what I did to remove the image zoomer in 1.0.19870 and it has worked well so far

 
Magento Community Magento Community
Magento Community
Magento Community
 
Lance Monotone
Member
 
Avatar
Total Posts:  63
Joined:  2008-04-16
North Adams, MA. 01247
 

I found another instance today: ’app\design\frontend\default\default\template\review\product\detailed.phtml‘‘.  I applied exactly the same fix on it by removing the same code as in the other file (though it starts on a different line).  It’s identical code and I am surprised at the duplication.  It should be in the same file if it’s providing the same functionality.

 
Magento Community Magento Community
Magento Community
Magento Community
 
gypsydogg
Jr. Member
 
Total Posts:  22
Joined:  2008-05-17
 

OK, this kind of worked for me, I commented out

<!-- <div class="image-zoom" id="track_outer">
<img id="zoom_out" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_out.gif') ?>” alt="<?php echo $this->__('Zoom Out') ?>” class="btn-zoom-out" />
<div id="track">
<div id="handle"></div>
</div>
<img id="zoom_in" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_in.gif') ?>” alt="<?php echo $this->__('Zoom In') ?>” class="btn-zoom-in" />
</div>
<script type="text/javascript\">
Event.observe(window, ‘load’, function() {
product_zoom = new Product.Zoom(’image’, ‘track’, ‘handle’, ‘zoom_in’, ‘zoom_out’);
});
</script> -->

because for some odd reason, mine was not 28-44.  Anyway, There are a few more changes I would like. 

I would like to show the full image in he main menu and not just a fixed dimension.  I followed the instructions above but it blows out the template.  I need the whole image to be resized into the existing box

 
Magento Community Magento Community
Magento Community
Magento Community
 
Lance Monotone
Member
 
Avatar
Total Posts:  63
Joined:  2008-04-16
North Adams, MA. 01247
 

This is how I did it in both files.  You’ll notice that there is an if-else construct that you have to take into account:

<?php //if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
<!--<class="main-product-img">
    <
img id="image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
</
p>
<
div class="image-zoom" id="track_outer">
    <
img id="zoom_out" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_out.gif') ?>" alt="<?php echo $this->__('Zoom Out') ?>" class="btn-zoom-out" />
    <
div id="track">
        <
div id="handle"></div>
    </
div>
    <
img id="zoom_in" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_in.gif') ?>" alt="<?php echo $this->__('Zoom In') ?>" class="btn-zoom-in" />
</
div>
<
script type="text/javascript">
    
/*Event.observe(window, 'load', function() {
        product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out');
    });*/
</script> -->
<?php //else: ?>
<img id="image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(150); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
<?php //endif; ?>

The second line from the end is where you set the image size (notice that it’s not commented out):

<img id="image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(150); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />

I’ve made mine 150.  I don’t remember what it was originally but that’s where you set it.  It does take a height as the second parameter but it doesn’t seem to resize proportionally.  I think I saw a plugin that may help but I haven’t had time to check it out.  Maybe the best way to do this is to resize the images before you upload them to make sure that they don’t exceed the ‘resize’ value above.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Otaugames
Sr. Member
 
Total Posts:  101
Joined:  2007-10-07
Troyes, France
 

It does take a height as the second parameter but it doesn’t seem to resize proportionally. I think I saw a plugin that may help but I haven’t had time to check it out.

This extension is called “Direct Resize” and it’s working fine. It’s available in Magento Connect wink

 
Magento Community Magento Community
Magento Community
Magento Community
 
magento-marie
Member
 
Avatar
Total Posts:  37
Joined:  2008-06-01
France
 

Thank you guys, that was just useful.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Reino
Sr. Member
 
Avatar
Total Posts:  78
Joined:  2008-06-22
Utrecht, The Netherlands
 

Works out fine! Thanks guys

 
Magento Community Magento Community
Magento Community
Magento Community
 
Gregg
Jr. Member
 
Total Posts:  14
Joined:  2008-02-08
 

This resize seems to limit the longest side to the set size. I have images that are taller than wide and would like to just set the width and have the height resize automatically. Is that possible?

 
Magento Community Magento Community
Magento Community
Magento Community
 
chiareu
Jr. Member
 
Avatar
Total Posts:  11
Joined:  2008-12-30
Bucharest - Romania
 

To simplify the code in your media.phtml
----------------
<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
?>

<?php
$_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(150).'" alt="'.$this->htmlEscape($_product->getImageLabel()).'" />';
echo $_helper->productAttribute($_product, $_img, 'image')
?>

<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
<h4><?php echo $this->__('More Views') ?></h4>
<ul>
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<a href="#" onclick="popWin(’<?php echo $this->getGalleryUrl($_image) ?>’, ‘gallery’, ‘width=250,height=250,left=10,top=10,location=no,status=no,scrollbars=no,resizable=no,z-index=999’); return false;"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>” alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>” title="<?php echo $this->htmlEscape($_image->getLabel()) ?>” /></a>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>

 
Magento Community Magento Community
Magento Community
Magento Community
 
amartinez
Guru
 
Avatar
Total Posts:  347
Joined:  2008-11-14
Spain
 

To disable image zoom:

Add to “&& false” to /app/design/frontend/default/default/template/catalog/product/view/media.phtml #37

<?php if ($_product->getImage() != 'no_selection' && $_product->getImage() && false): ?>

To allow click and maximize (shows a pop-up with exact image dimensions):

Edit “else” at #57:

<?php else: ?>
<class="product-image">
    <
a href="#" onclick="popWin('<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>', 'gallery', 'scrollbars=yes,width=<?php echo $this->helper('catalog/image')->init($_product, 'image')->getOriginalWidth() ?>,height=<?php echo $this->helper('catalog/image')->init($_product, 'image')->getOriginalHeight() ?>,resizable=yes');return false;">
    
<?php
        $_img 
'<img src="'.$this->helper('catalog/image')->init($_product'image')->resize(300).'" alt="'.$this->htmlEscape($_product->getImageLabel()).'"/>';
        echo 
$_helper->productAttribute($_product$_img'image');
    
?>
    
</a>
</
p>
<?php endif; ?>

Please be sure to edit the correct template file!

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top
Page 1 of 2