Magento product image switcher

Featured Image

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.

42
Top

Enjoyed this post?

Subscribe to our RSS Feed, Follow us on Twitter and spread it to your friends!

Author

Ivan Weiler

Team Leader

Ivan is a team leader and a senior web developer. He gained lots of experience managing some of the most complex Magento projects we had at Inchoo.

Other posts from this author

Discussion 42 Comments

Add Comment
  1. 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”?
    ;)

  2. Alex

    very great work!
    Thanks

  3. Can I see a sample of this ? do you have it installed on some demo store ?

    Thanks for posting your work.

  4. Julien

    Works great!
    Please let us know if you manage to include the zoom function :-)

  5. 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 ;)

  6. Hello,

    Can we unite with this great Tuto lightbox?
    Use lightbox for expansion.
    If so how?

    Thank you

  7. rob

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

  8. great work

  9. 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.

  10. ycetrey

    works fine in IE8, but not work in FF
    someone help me ?

  11. Disha

    Cool extension :)

  12. mike

    How can I center the images, looks left justified…. Or how can I add padding to the left side?

  13. How are you so awesome? It bothers me.

  14. Is there a way to hide “more views” if you only have 1 of that product? Only show it if there are more than 1 picture?

  15. @Traci:

    The following line controls the count:
    0): ?>

    change zero to one.

  16. Shani

    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?

  17. Cool extension

  18. Andy

    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.

  19. Thanks for that great mod, How can i make this automatically transiting?

  20. I agree, Fancybox instead of popup window would be perfect

  21. This works like a charm! Thanks for the great tip!
    Working on Magento ver. 1.3.2.3

  22. Skoll

    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()) ?>" />
    
  23. varyd

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

  24. varyd

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

  25. yuriy

    Do not work with any IE for me. Can anywone help?

  26. vipinss316

    Thanx a lot… thnx a lot

  27. christian

    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..

  28. Ragesh

    does it work like flip book?
    I want something like flipping book on flash, but it cost much

  29. Neil

    The method for default zoom does not seem to work,where is the javascript for the zoom ?

  30. gfxguru

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

  31. 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)

  32. shawn

    this is great! thanks for sharing.

  33. Thanks a lot for this! You’re blog is such a great resource.

  34. Wow Great

    You are genies,

    Thank you so much.

  35. very nice work!
    Thanks

  36. Sebas

    You are agenius!

    Tt works fine in MAgento 1.6 !
    Thanks

  37. Dan

    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!!

  38. hi, i am in search of a zoom feature in magento product pages justlike cloudzoom , but cannot seem to get it working i just found this site on magento that uses the zoom feature that i would like to integated on to my magento website http://www.fabulloso.com/apparel/men/shirts/chamra-shirt-white.html
    please help .

  39. 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; ?>
    
  40. @kevin, i want it to display like on ur site

    http://extensions.qazware.com/extensions/q-options.html

  41. Dan

    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

Add Your Comment

Please wrap all source codes with [code][/code] tags.
Top