将动画添加到图像更改

Question

我刚刚在opencart中实现了一个扩展，它允许我单击缩略图来更改主图像，唯一的问题是只更改没有动画或过渡效果的图像，我会使图像滑入，有没有添加到我已经拥有的代码，以便我可以做到这一点？

下面是MOD代码：

<file name="catalog/controller/product/product.php"> 
     <operation> 
      <search position="after"><![CDATA['popup' => $this->model_tool_image->resize($result['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height')),]]></search> 
      <add><![CDATA[// BOF om_Thumb_image_swap.xml 
'addthumb' => $this->model_tool_image->resize($result['image'], $this->config->get('config_image_thumb_width'), $this->config->get('config_image_thumb_height')), 
// EOF om_Thumb_image_swap.xml]]></add> 
     </operation> 
    </file> 

    <file name="catalog/view/theme/nthwondr_2013/template/product/product.tpl"> 
     <operation> 
      <search position="before"><![CDATA[<?php echo $footer; ?>]]></search> 
      <add><![CDATA[<!-- BOF om_Thumb_image_swap.xml --> 
<?php if ($images) { ?> 
<script type="text/javascript"><!-- 
$(function(){ 
    var imgs = <?php echo json_encode($images); ?>; 
    var html = ''; 
    $.each(imgs,function(i,image){ 
     html += '<div class="image" style="display:none;"><a href="' + image.popup + '" title="<?php echo $heading_title; ?>" class="colorbox">'; 
     html += '<img src="' + image.addthumb + '" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></div>'; 
     $('.image-additional').before(html); 
     html = ''; 
    }) 
    html = '<a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>">'; 
    html += '<img src="<?php echo $thumb; ?>" width="<?php echo $this->config->get('config_image_additional_width'); ?>" height="<?php echo $this->config->get('config_image_additional_height'); ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" style="padding-left: 2px;" /></a>'; 
    $('.image-additional').prepend(html); 
    var images = $('div.left .image'); 
    var thumbs = $('.image-additional a'); 
    thumbs.removeClass('cboxElement').removeClass('colorbox'); 
    images.children('a').colorbox({rel:'colorbox'}); 
    thumbs.on('click',function(e){ 
     e.preventDefault(); 
     images.hide(); 
     images.eq(thumbs.index(this)).show(); 
    }); 
}); 
//--></script> 
<!-- EOF om_Thumb_image_swap.xml --> 
<?php } ?>]]></add> 
     </operation> 
    </file> 

任何帮助将不胜感激，谢谢你们。

Answer 1

您可以使用此，

thumbs.on('click',function(e){ 
     e.preventDefault(); 
     images.hide('slide', {direction: 'left'}, 1000); 
     images.eq(thumbs.index(this)).show('slide', {direction: 'left'}, 1000); 
    });