Magento product image switcher

Magento product image switcher

I just wrote small javascript animation example for product images and thought someone may find it useful. It’s a fast way to replace default zoom functionality for the ones that don’t like it.

I’m actually trying to merge something like this with default zoom, but i’m not finished yet. Anyway, i left all javascript and styling in media.phtml file, so just download the file

media.phtml.rar

and replace it with your own at
app/design/frontend/default/yourtheme/template/catalog/product/view/media.phtml

It was made with default Magento theme. Enjoy.

You made it all the way down here so you must have enjoyed this post! You may also like:

Sorry, we can’t ship there Sasa Brankovic
Sasa Brankovic, | 12

Sorry, we can’t ship there

Shell script for converting configurable to grouped products Tsvetan Stoychev
Tsvetan Stoychev, | 5

Shell script for converting configurable to grouped products

Adding product image lightbox effect using jQuery plugin (a better way) Srdjan Stojiljkovic
Srdjan Stojiljkovic, | 20

Adding product image lightbox effect using jQuery plugin (a better way)

52 comments

  1. hide the zoom option for product images with less resolution in magento

    hi,

    first of all, sorry for disturbing you here.

    please visit this link :

    http://kidsdial.com/chair.html, you can see there is a zoom option on the products images

    if we upload smaller images as like here :

    http://kidsdial.com/microsoft-wireless-optical-mouse-5061.html

    the product image is not zooming properly

    so i want to hide the zooming option for images with less than 400 * 400 pixels.

    please help me to find some solution.

    thanks in advance

  2. Jimmy, did you find anything? I want the exact same effect, too! Let me know if you find something similar. Kisses

  3. Please can anybody help,
    I need the more view image labels (alt) to transfer with the image into the product large view box. When I click onto the moreview image this loads into the box above but I cannot get the image label to carry with it????
    Thanks if anyone can help

  4. at last able to perform zoom, i have modified above code to below , now how to load the gallaery image in zoom window , here is the modified code,

    thx

    <?php
        $_product = $this->getProduct();
        $_helper = $this->helper('catalog/output');
        $_gallery = $this->getGalleryImages();
    
        $_resizeh = 300;
    	$_resizew = 260;
    ?>
    
    <style type="text/css">
    	.product-img-box .more-views li.slide-current a{ border:2px solid #aaa; }
    	.product-img-box .product-image-zoom img { cursor: pointer; }
    	#slide-loader{ visibility:hidden; position:absolute; top:auto; left:auto; right:2px; bottom:2px; }
    </style>
    
    <script type="text/javascript">
    function slide(url,num,gallery){
        if (typeof slide.loading == 'undefined') slide.loading = false;
    	if(slide.loading) return false;
    
    	var loader = new Image();
    	$(loader).observe('load', function(){
    
    		$('slide-loader').setStyle({'visibility':'hidden'});
    
    		$$('div.more-views li').each(function(el,i){
    			(i==num) ? el.addClassName('slide-current') : el.removeClassName('slide-current');
    		});
    
    		var dummy = new Element('img', { src: url }).setOpacity(0);
    		new Insertion.After('image', dummy);
    		new Effect.Opacity(dummy, { duration:.5, from:0, to:1.0 });
    		new Effect.Opacity($('image'), { duration:.5, from:1.0, to:0, 
    			 afterFinish: function(){
    			 	$('image').writeAttribute('src',url).setOpacity(1).observe('click',function(e){
    				 	Event.stop(e);
    			 		popWin(gallery, 'gallery', 'width=300,height=300,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes'); 
    			 		return false;
    				 })
    			 	dummy.remove();
    			 	slide.loading = false;
    			 }
    		});
    	});
    
    	$('slide-loader').setStyle({'visibility':'visible'});
    	loader.src=url;
    	slide.loading = true;
    return false;
    }
    </script>
    
    <p class="product-image-zoom">
    	<?php                                                    
    		$_img = '<a href="'.$this->helper('catalog/image')->init($_product, 'image').'" class="jqzoom" title="Magnified Image"><img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image')->resize($_resizew,$_resizeh).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" onclick="popWin(\''.$this->getGalleryUrl().'.\', \'gallery\', \'width=300,height=300,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes\'); return false;" /></a>';
            echo $_helper->productAttribute($_product, $_img, 'image')
        ?>
        <img id="slide-loader" src="<?php echo $this->getSkinUrl('images/opc-ajax-loader.gif') ?>" />
    </p>
    
    <p class="a-center" id="track_hint"><?php echo $this->__('Hover with mouse to zoom') ?></p>
    
    <?php if (count($_gallery) > 0): ?>
    <div class="more-views">
        <h4><?php echo $this->__('More Views') ?></h4>
        <ul>
        <?php foreach ($_gallery as $_image): ?>
            <li>
                <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" onclick="slide('<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->keepFrame(false)->resize($_resize) ?>',<?php echo ($s = isset($s) ? ++$s : 0) ?>,'<?php echo $this->getGalleryUrl($_image) ?>'); return false;"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->keepFrame(false)->resize(56); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
            </li>
        <?php endforeach; ?>
        </ul>
    </div>
    <?php endif; ?>
  5. This is working great even in latest v1.6.2, I just need to make two mods and it would be perfect;

    1) How can I disable the pop up window on main image double click.

    2) Show image titles of thumbnails loaded to main image.

    Thanks in advance if anybody can help!!

  6. Cool effect!

    But is it somehow possible to open the main image as lightbox. (I managed it to open in it lightbox but the lightbox always starst with the first image)

  7. actually the zip file appears to be corrupt.. any chance in getting another or is it my zip utility…

  8. I’m using this one but I want to extend the functionality by changing the javscript popup with a ligthbox.. Can’t get it working.. Any guidance would be much appreciated..

  9. Just tested it, find the main image losted in the image window popup, good extension, but need update. thanks.

  10. Can this extension be use in version1.4 of magento? Expression method of image url is not like as before, now is double brackets.

  11. I’ve modified the code and now default zoom works 😉

    getProduct();
        $_helper = $this->helper('catalog/output');
        $_gallery = $this->getGalleryImages();
    
        $_resize = 265;
    ?>
    
    	.product-img-box .more-views li.slide-current a{ border:2px solid #aaa; }
    	.product-img-box .product-image-zoom img { cursor: pointer; }
    	#slide-loader{ visibility:hidden; position:absolute; top:auto; left:auto; right:2px; bottom:2px; }
    
    function slide(url,num,gallery){
        if (typeof slide.loading == 'undefined') slide.loading = false;
    	if(slide.loading) return false;
    
    	var loader = new Image();
    	$(loader).observe('load', function(){
    
    		$('slide-loader').setStyle({'visibility':'hidden'});
    
    		$$('div.more-views li').each(function(el,i){
    			(i==num) ? el.addClassName('slide-current') : el.removeClassName('slide-current');
    		});
    
    		var dummy = new Element('img', { src: url }).setOpacity(0);
    		new Insertion.After('image', dummy);
    		new Effect.Opacity(dummy, { duration:.5, from:0, to:1.0 });
    		new Effect.Opacity($('image'), { duration:.5, from:1.0, to:0, 
    			 afterFinish: function(){
    			 	$('image').writeAttribute('src',url).setOpacity(1).observe('click',function(e){
    				 	Event.stop(e);
    			 		return false;
    				 })
    			 	dummy.remove();
    			 	slide.loading = false;
    			 }
    		});
    	});
    
    	$('slide-loader').setStyle({'visibility':'visible'});
    	loader.src=url;
    	slide.loading = true;
    return false;
    }
    
    	<?php
            $_img = 'helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
            echo $_helper->productAttribute($_product, $_img, 'image');
        ?>
        <img id="slide-loader" src="getSkinUrl('images/opc-ajax-loader.gif') ?>" />
    
        <img id="zoom_out" src="getSkinUrl('images/slider_btn_zoom_out.gif') ?>" alt="__('Zoom Out') ?>" title="__('Zoom Out') ?>" class="btn-zoom-out" />
    
        <img id="zoom_in" src="getSkinUrl('images/slider_btn_zoom_in.gif') ?>" alt="__('Zoom In') ?>" title="__('Zoom In') ?>" class="btn-zoom-in" />
    
    //
    
     0): ?>
    
        __('More Views') ?>
    
                <a href="helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" onmouseover="slide('helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize($_resize) ?>',,'getGalleryUrl($_image) ?>'); return false;"><img src="helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" alt="htmlEscape($_image->getLabel()) ?>" title="htmlEscape($_image->getLabel()) ?>" />
  12. This really works great. Thanks!

    Is there a way to replace the pop-up windows with a fancybox or lightbox window on click?

    Sorry about being greedy, but a fancybox would just make this perfect.

    Thanks.

  13. It’s probably a stupid question but I don’t understand how do I add images to the product gallery? As far as I see I can only add one base image, one small image and one thumbnail… what am I missing?

  14. Thanks for this good extension! 🙂 I test is with IE brower and found it’s looks not so smooth.It’s perfect when browsing with firefox.

  15. I don’t understand what you’ve changed from reading this post. Have you added an “Active” state for the thumbs?

  16. Thank you all. I don’t have any sample running live right now, sorry, i’m considering to setup one Magento playground/showcase site for things like this. I’ll probably pack it as module with custom block once i polished it some more 😉

  17. Good work Ivan. Is there a way to make a module of this? Can we create a module that tells Magento to replace certain block if the selected theme is “default”?
    😉

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.