内部有ColorBox调用的OpenCart脚本需要替换为Responsive FancyBox调用

Question

我正在开发一个响应式OpenCart（1.5.2.1）主题，并用响应式FancyBox替换了ColorBox脚本。除了在这段OpenCart脚本中，我其他都能工作。

我想更换ColorBox部件，但我可以让它正常工作。

你可以在这里找到反应灵敏的FancyBox

<script type="text/javascript"><!--
$('#button-quote').live('click', function() {
$.ajax({
    url: 'index.php?route=checkout/cart/quote',
    type: 'post',
    data: 'country_id=' + $('select[name='country_id']').val() + '&zone_id=' + $('select[name='zone_id']').val() + '&postcode=' + encodeURIComponent($('input[name='postcode']').val()),
    dataType: 'json',       
    beforeSend: function() {
        $('#button-quote').attr('disabled', true);
        $('#button-quote').after('<span class="wait">&nbsp;<img src="catalog/view/theme/sellegance/image/loading.gif" alt="" /></span>');
    },
    complete: function() {
        $('#button-quote').attr('disabled', false);
        $('.wait').remove();
    },      
    success: function(json) {
        $('.success, .warning, .attention, .error').remove();           
        if (json['error']) {
            if (json['error']['warning']) {
                $('#notification').html('<div class="warning" style="display: none;">' + json['error']['warning'] + '<img src="catalog/view/theme/sellegance/image/close.png" alt="" class="close" /></div>');
                $('.warning').fadeIn('slow');
                $('html, body').animate({ scrollTop: 0 }, 'slow'); 
            }   
            if (json['error']['country']) {
                $('select[name='country_id']').after('<span class="error">' + json['error']['country'] + '</span>');
            }   
            if (json['error']['zone']) {
                $('select[name='zone_id']').after('<span class="error">' + json['error']['zone'] + '</span>');
            }
            if (json['error']['postcode']) {
                $('input[name='postcode']').after('<span class="error">' + json['error']['postcode'] + '</span>');
            }                   
        }
        if (json['shipping_method']) {
            html  = '<h2><?php echo $text_shipping_method; ?></h2>';
            html += '<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data">';
            html += '  <table class="radio">';
            for (i in json['shipping_method']) {
                html += '<tr>';
                html += '  <td colspan="3"><b>' + json['shipping_method'][i]['title'] + '</b></td>';
                html += '</tr>';
                if (!json['shipping_method'][i]['error']) {
                    for (j in json['shipping_method'][i]['quote']) {
                        html += '<tr class="highlight">';
                        if (json['shipping_method'][i]['quote'][j]['code'] == '<?php echo $shipping_method; ?>') {
                            html += '<td><input type="radio" name="shipping_method" value="' + json['shipping_method'][i]['quote'][j]['code'] + '" id="' + json['shipping_method'][i]['quote'][j]['code'] + '" checked="checked" /></td>';
                        } else {
                            html += '<td><input type="radio" name="shipping_method" value="' + json['shipping_method'][i]['quote'][j]['code'] + '" id="' + json['shipping_method'][i]['quote'][j]['code'] + '" /></td>';
                        }
                        html += '  <td><label for="' + json['shipping_method'][i]['quote'][j]['code'] + '">' + json['shipping_method'][i]['quote'][j]['title'] + '</label></td>';
                        html += '  <td style="text-align: right;"><label for="' + json['shipping_method'][i]['quote'][j]['code'] + '">' + json['shipping_method'][i]['quote'][j]['text'] + '</label></td>';
                        html += '</tr>';
                    }       
                } else {
                    html += '<tr>';
                    html += '  <td colspan="3"><div class="error">' + json['shipping_method'][i]['error'] + '</div></td>';
                    html += '</tr>';                        
                }
            }
            html += '  </table>';
            html += '  <br />';
            html += '  <input type="hidden" name="next" value="shipping" />';
            html += '  <input type="submit" value="<?php echo $button_shipping; ?>" class="button" />';             
            html += '</form>';
            $.colorbox({
      overlayClose: true,
      opacity: 0.5,
      width: '600px',
      height: '400px',
      href: false,
      html: html
    });
        }
    }
});

})；//-->

我试着更换

$.colorbox({
      overlayClose: true,
      opacity: 0.5,
      width: '600px',
      height: '400px',
      href: false,
      html: html
    });

带有

$(".fancybox").fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
        href: false,
        html: html
    });

但运气不佳

Answer 1

试试这个

$.fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
        content     : html
    });

如果您不分配任何href，则不需要该选项。此外，content无论如何都将覆盖href。