Добавление анимации к смене изображения

Question

Добавление анимации к смене изображения

0

Я только что внедрил расширение в opencart, которое позволяет мне нажимать на миниатюру для изменения основного изображения, единственная проблема заключается в том, что просто изменяет изображение, которое не имеет никакой анимации или эффекта перехода, я бы сделал так, чтобы изображения вставить, есть ли вообще добавить код, который у меня уже есть, чтобы я мог это сделать?

Вот код для мода:

<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>

Любая помощь будет принята с благодарностью, спасибо, ребята.

TristanD27 19 апр. 2014, в 17:51

Источник

Теги:

php

javascript

html

image

thumbnails

1 ответ

Ещё вопросы

Vishnuraj V · Answer 1 · 2014-04-19T20-12-00.000Z

Вы можете использовать это,

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

Я попробовал это, но когда изображения начинают прыгать повсюду, они скользят, но просто не в нужных местах, это также добавляет дополнительный эскиз, который я не хочу.