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

Question

我最近偶然发现 inchoo 的一篇文章

它改变了默认方式magento 如何显示更多视图缩略图..很容易集成，但我想要更多扩展功能，即当单击主图片（大图像）时，它将显示当前主图片中的图像在灯箱里。这是我的 media.phtml 的代码...

我仅通过在标签中使用 class="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; ?>

谢谢，更多的力量！

Answer 1

为什么不直接使用连接中已有的众多灯箱模块之一？

http://www.magentocommerce.com/magento-连接/TemplatesMaster/扩展/1487/magento-easy-lightbox/

Answer 2

jQuery Lightboxes（Fancybox、pirobox 和 lightbox 克隆）是 magento 最好的 jQuery Lightbox 扩展之一。最近它已经更新了很多新功能。
尝试一下：
http://www.magepsycho.com/jquery-lightbox-es.html