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”?

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

Thanks for posting your work.

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

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.

Cool extension

How are you so awesome? It bothers me.

@Traci:

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

change zero to one.

Cool extension

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

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

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

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

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

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

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)

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

very nice work!
Thanks

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

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; ?>

@kevin, i want it to display like on ur site

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