【发布时间】：2011-02-04 07:51:11
【问题描述】：
我最近偶然看到一篇来自inchoo的文章
它改变了 magento 如何显示的默认方式更多视图缩略图。它很容易集成，但我想要一个更扩展的功能，即当单击主图片（大图像）时，它将在灯箱中显示当前主图片中的图像。这是我的 media.phtml...
的代码我已经在我的magento中集成了一个thickbox，只需在标签中使用 class="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; ?>
感谢和更多的力量！
【问题讨论】：
-
抱歉，这里有什么问题？这在哪些方面对您不起作用？
-
抱歉含糊了..我想问的是如何扩展功能，即当点击主图（大图）时，它会显示当前在主图中的图像在灯箱里..
-
您介意分享一下您是如何做到这一点的吗？我们正在寻找完全相同的效果。