Call-back icon  Sales: Call 877.832.5289 (N America)|310.295.4144 (International)

Magento

eCommerce Software for Online Growth

Magento Forum

   
how to disable the image zoomer? and just have a normal image display? 
 
SimpleHelix.com
Guru
 
Avatar
Total Posts:  426
Joined:  2007-08-31
Los Angeles, CA
 

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

 Signature 

SimpleHELIX.com, LLC
A World-Class Magento Web Hosting company - Providing scalable, reliable, and secure enterprise hosting solutions
The creators of super-fast performance hosting. Find out more @ http://www.simpleHELIX.com

 
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
 
chinesedream
Guru
 
Total Posts:  745
Joined:  2007-08-31
San Francisco, CA
 

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:  57
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 06: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:  57
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:  57
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:  36
Joined:  2008-06-02
France
 

Thank you guys, that was just useful.

 Signature 

http://www.metre-carre.net

 
Magento Community Magento Community
Magento Community
Magento Community
 
Reino
Member
 
Avatar
Total Posts:  34
Joined:  2008-06-22
Utrecht, 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
Magento Community
Magento Community
    Back to top
 
Sales: Call 877.832.5289 (North America) 310.295.4144 (International)
© Copyright 2008 Varien. Magento, eCommerce software, is a trademark of Irubin Consulting Inc. DBA Varien
Privacy Policy|Terms of Service
Magento Community Count
53170 users|764 users currently online|107191 forum posts