Magento Forum

   
Using Cloudzoom + popup window together
 
jeroenpeters
Member
 
Total Posts:  55
Joined:  2011-01-19
 

Hi,

For over the last 2 years, I use CloudZoom in my store. I installed it manually without Magento extensions.

When the visitor hovers the main image, CloudZoom appears.
Now I want to show the Magento’s default pop up gallery window with all the product images.

In short, this is what I want to do:

When a vistor hovers the main image -> CloudZoom appears
When a visitor clicks on the main image -> The default pop-up windows appears.

Main image

<a href="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(900); ?>" class="cloud-zoom" id="zoom1" rel="adjustX: 10, adjustY: 0">
            <
img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(290); ?>" alt="<?php echo $this->htmlEscape($this->getImageLabel()); ?>" />
        </
a>

More views

<?php
    $_product 
$this->getProduct();
    
$_helper $this->helper('catalog/output');
?>
<?php 
if (count($this->getGalleryImages()) > 0): ?>

<div class="more-views">
    <
ul>
    
<?php foreach ($this->getGalleryImages() as $_image): ?>    
        
<li><a href='<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize(900); ?>' class='cloud-zoom-gallery' title='<?php echo $this->htmlEscape($_image->getLabel()) ?>'
            
rel="useZoom: 'zoom1', smallImage: '<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'small_image', $_image->getFile())->resize(290); ?>' ">
        <
img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'small_image', $_image->getFile())->resize(66); ?>" alt "<?php echo $this->htmlEscape($_image->getLabel()) ?>"/></a>
        </
li>
    
<?php endforeach; ?>
    
</ul>
</
div>
<?php endif;
?>

An example of the pop-up script when clicking on an image of the more views:

onclick="popWin('http://demo.magentocommerce.com/catalog/product/gallery/id/158/image/158/', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;"

Does someone know how I can do this?

Thx in advance.

Peters

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
    Back to top