Magento 제품 이미지 스위처에서 라이트 박스 효과를 추가하는 방법은 무엇입니까?

Question

내가 최근 inchoo

에서 기사에 부딪쳤다 그것은 어떻게 젠토 표시 더보기 축소판의 기본 방식을 변경합니다 .. 그것은 쉽게 통합 할 수있어하지만 난은 더욱 확장 된 기능을 할 때 메인 화면 (대형을 이미지)를 클릭하면 현재 주 그림에있는 이미지가 라이트 박스에 표시됩니다. 여기 내 media.phtml의 코드 ... 난 그냥 태그에 클래스 = "Thickbox와"를 사용하여 내 젠토에 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-connect/TemplatesMaster/extension/1487/magento-easy-lightbox/

Answer 2

는 jQuery를 라이트 박스 (Fancybox는 pirobox & 라이트 박스 클론)은 하나의 젠토에 가장 jQuery를 라이트 박스 확장이다. 최근에 많은 새로운 기능으로 업데이트되었습니다.
시도해보기 :
http://www.magepsycho.com/jquery-lightbox-es.html