оптимизация colorbox и добавление дополнительных jquery - PullRequest
Новая
       19

оптимизация colorbox и добавление дополнительных jquery

2 голосов
/ 23 января 2012

У меня две проблемы

  1. Я пытаюсь открыть jQuery colorbox, и он очень медленный. Причина в том, что я пытаюсь получить html контент с другой страницы (я не могу использовать iframe, потому что мне просто нужна часть этой страницы). Следующий код работает, но после нажатия кнопки требуется время: 

    $(document).ready(function() {
    $(".cart-link a").click(function(event) {
        $(this).colorbox.close();
    });


    $(".rest-menuitem a").click(function(event) {
        event.preventDefault();
        var result = null;
        var sURL = $(this).attr("href");
        $.colorbox({
            html: function() {
                $.ajax({
                    url: sURL,
                    type: 'get',
                    dataType: 'html',
                    async: false,
                    success: function(data) {
                        result = data;
                    }
                });
                return $(result).find('.product');
            },
            width: '650px',
            height: '10px',
            onComplete: function() {
                $(this).colorbox.resize();
            }
        });

    });

});

    Я хочу знать, есть ли альтернативный способ сделать это. Я не против, если всплывающее окно colorbox и затем занимает время, чтобы загрузить контент. Вышеназванная версия может быть найдена по этому адресу (http://delivery3.water -7.com / index.php / рестораны / производители / 3 / Барселона-Ресторан - & - Winebar / products ).

  2. Я также пытаюсь закрыть цветовую коробку, когда пользователь нажимает добавить в корзину. Но почему-то это не вызвано. $(".cart-link a").click не срабатывает при нажатии на кнопку добавить в корзину. Есть ли особый способ добавить jquery к содержимому colorbox?

Ответы [ 2 ]

4 голосов
/ 24 января 2012

Попробуйте вместо этого: 

$(".rest-menuitem a").colorbox({
    href: function(){ 
        return $(this).attr('href') + ' .products';
    },
    width: '650px',
    height: '10px',
    onComplete: function() {
        $(this).colorbox.resize();
    }
});

ColorBox использует метод load () jQuery для обработки ajax, поэтому вам просто нужно добавить нужный селектор в ссылку на ссылку.

1 голос
/ 23 января 2012

Для вашего вопроса 2 вы можете попробовать это? 

$(document).ready(function() {
    $(".cart-link a").live('click',function(event) {
        $(this).colorbox.close();
    });
});

Для вашего вопроса 1.. Он будет медленным, так как вы выбираете его с другой страницы. Используйте другую логику для этого 

For your question no 1



 $('selector').colorbox({onLoad: function() { /*Intially load a empty color box with only <div id="contenttoload"></div> (No other html content */
        $.ajax({
            url :'Your url',
            data : {}, //data to send if any
            type : "POST" //or get
            success:function(data){ /*data means the stuff you want to show in color box which you must return from the other page*/
                     $('#contenttoload').html(data); //data should be well formatted i mean add your css,classes etc from the server itself */
                }


});
}});
...