Magento

I’ve seen a few posts regarding disabling or modifying the image zoom feature. Here’s what I did - I wanted the product image to show up, without the zoom, a certain size and allow users to view the full size image in a new window if they need more detail:

Original code in template/catalog/product/view/media.phtml:

New, simplified code:

Notice I removed the “product-image-zoom” class. I also removed the if/else since it didn’t seem necessary anyway. Now, the product image shows up no larger than 250x250 pixels. One click on the image will show the full size picture. This new code is nothing special, but I like having a pop-up window to show details rather than using the image zoom feature.

@kullysupply, nice post!

I´ll try and I hope it works to me.

The true is, I don´t like the image zoom feature of Default theme. I mean, it´s not 100% as clean and cool as another Magento´s features.

Thanks!

I am trying to do the exact opposite I want to disable the pop up window while keep the zoom.

I replaced this code:

With this:

Now my small images do not pop up but rather get displayed in the larger image box...but if I double click on the large image it still pops up. Any help on disabling the pop up?

(edit) whoops...double posted =)

@oakRunk, very interesting!

I want to know too.

Here is the complete code for: app\design\frontend\default\blank\template\catalog\product\view\media.phtml

I also changed the:

Nice mod thanks - I wanted “more views” though so here is what I did.

oakRunk - 28 October 2008 06:06 PM

I am trying to do the exact opposite :-) I want to disable the pop up window while keep the zoom.

I replaced this code:

<a href="#" onclick="popWin('<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>', 'gallery', 'width=520,height=520,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;">

With this:

<a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" title="<?php echo $_product->getName();?>" onclick="$('image').src = this.href; return false;">

Now my small images do not pop up but rather get displayed in the larger image box...but if I double click on the large image it still pops up. Any help on disabling the pop up?

what document/line is that in? I could not find it in my media.phtml file. See below.
I am trying to keep the zoom and remove the pop up. I want the images to display in the larger photo area.

^ That is different than my media file so I don’t know where to tell you to look.

@Envee

Replace with this

This will remove the abiity for your top image to pop out

Thanks, this works great.

Is there any way to have a <-previous next-> link added to the thumbnails popup.

Say I have four images under “more views” they click the first thumbnail, is there a way to add links to the next three.

This way they wouldn’t have to close the window, click the next one and so forth…

Ok, slight change to what I said above. I see that this already works.

But… I changed the popup to be the same as the large image (no header, navigation, etc...) and when I did that the next prev links disappeared.

So I guess my question now, is how do I make the popup box for the thumbnails looks the same as the popup for the large image, but include the next prev links?

kullysupply - 14 October 2008 07:54 AM

I’ve seen a few posts regarding disabling or modifying the image zoom feature. Here’s what I did - I wanted the product image to show up, without the zoom, a certain size and allow users to view the full size image in a new window if they need more detail [...]
[...] Notice I removed the “product-image-zoom” class. I also removed the if/else since it didn’t seem necessary anyway. Now, the product image shows up no larger than 250x250 pixels. One click on the image will show the full size picture. This new code is nothing special, but I like having a pop-up window to show details rather than using the image zoom feature.

Nice patch, thanks very much!

Bungle

Your code worked perfectly, but I would like my image to open in the lightbox rather than the pop-up window.  I have already installed the lightbox and my thumbnails open in the lightbox, but Im not sure how to get the main image to open in the lightbox.

Any ideas would be greatly appreciated.

kullysupply - 14 October 2008 07:54 AM

New, simplified code:

<?php $_product = $this->getProduct() ?>
<p class="product-image">
    <a href="#" onclick="popWin('<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>', 'gallery', 'width=520,height=520,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;">
    <img id="image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(250,250); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>" />
    </a>
</p>

Notice I removed the “product-image-zoom” class. I also removed the if/else since it didn’t seem necessary anyway. Now, the product image shows up no larger than 250x250 pixels. One click on the image will show the full size picture. This new code is nothing special, but I like having a pop-up window to show details rather than using the image zoom feature.

Thx for that code snippet. Helped me a lot!

Hello,
This works great but the pop-up image is left. Is there anyway to center the popup image?

kullysupply - 14 October 2008 07:54 AM

I’ve seen a few posts regarding disabling or modifying the image zoom feature. Here’s what I did - I wanted the product image to show up, without the zoom, a certain size and allow users to view the full size image in a new window if they need more detail:

Original code in template/catalog/product/view/media.phtml:

<?php $_product = $this->getProduct() ?>
<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
<p class="product-image product-image-zoom">
    <img id="image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>" />
</p>
<p class="zoom-notice" id="track_hint"><?php echo $this->__('Double click on above image to view full picture') ?></p>
<div class="zoom">
    <img id="zoom_out" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_out.gif') ?>" alt="<?php echo $this->__('Zoom Out') ?>" title="<?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') ?>" title="<?php echo $this->__('Zoom In') ?>" class="btn-zoom-in" />
</div>
<script type="text/javascript">
//<![CDATA[
    Event.observe(window, 'load', function() {
        product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
    });
//]]>
</script>
<?php else: ?>
<p class="product-image">
    <img src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(265); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>" />
</p>
<?php endif; ?>

New, simplified code:

<?php $_product = $this->getProduct() ?>
<p class="product-image">
    <a href="#" onclick="popWin('<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>', 'gallery', 'width=520,height=520,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;">
    <img id="image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(250,250); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>" />
    </a>
</p>

Notice I removed the “product-image-zoom” class. I also removed the if/else since it didn’t seem necessary anyway. Now, the product image shows up no larger than 250x250 pixels. One click on the image will show the full size picture. This new code is nothing special, but I like having a pop-up window to show details rather than using the image zoom feature.