如何在Magento产品图像切换器中添加灯箱效果？

我最近碰到了一篇文章里，inchoo 如何在Magento产品图像切换器中添加灯箱效果？

它改变了关于如何Magento的显示器更多查看缩略图的默认方式。它很容易地集成，但我想更多的扩展功能，这是当主画面（大图像）被点击后，它将在灯箱中显示当前在主图像中的图像。这里是我的media.phtml的代码...

我刚刚通过在标签中使用类=“ThickBox的”集成在我的Magento ThickBox时..

<?php 
    $_product = $this->getProduct(); 
    $_helper = $this->helper('catalog/output'); 
    $_gallery = $this->getGalleryImages(); 

    $_resize = 350; 
?> 

<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; width: 25px; height: 25px; } 
</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 class="thickbox" href="'.$this->helper('catalog/image')->init($_product, 'image').'" title="'.$this->htmlEscape($this->getImageLabel()).'"><img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" /></a>'; 
     echo $_helper->productAttribute($_product, $_img, 'image') 
    ?> 
    <img id="slide-loader" src="<?php echo $this->getSkinUrl('images/lightbox/loading.gif') ?>" /> 
</p> 
<!-- <p class="a-center" id="track_hint"><?php echo $this->__('Click on above image to view full picture') ?></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()) ?>',<?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())->resize(65); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a> 
     </li> 
    <?php endforeach; ?> 
    </ul> 
</div> 
<?php endif; ?>

感谢和更多的权力！

来源

2011-02-04 Christian Young

对不起，这里有什么问题？按照规定，这不适用于你的方式？ – 2011-02-04 15:56:00

对不起模糊..我想问的是如何扩展主画面（大图像）被点击时的功能，它将在灯箱中显示当前在主画面中的图像.. – 2011-02-04 16:10:44