Colorbox не может открыть или добавить класс cbox

У меня есть <a href=""> который нацелен на скрытый <div>, Я загружаю скрытый HTML-контент во всплывающее модальное окно, но моя ссылка всегда переходит на домашнюю страницу (baseurl).

http://coolicebox.petersenuploads.co.uk/product.php?xProd=2&xSec=5

Смотрите ссылку на панели параметров (см. Больше цветов)

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

Есть идеи?

Большое спасибо

Источник

3 ответа

Решение

К моменту document.ready () элемент находился в HTML, но возникла проблема с предыдущим вызовом 'any-slider'. С тех пор я прокомментировал это следующим образом, чтобы проверить, существует ли слайдер, прежде чем делать что-либо еще. В настоящее время работает. Спасибо за вашу помощь и совет Энди, даже если это не было решением.

$(document).ready(function () {
if($('#slider').length > 0) {
    $('#slider')
        .anythingSlider({
            navigationFormatter : function(index, panel){
                return ['Slab', 'Parking Lot', 'Drive', 'Glorius Dawn', 'Bjork?', 'Traffic Circle'][index - 1];
            },
            buildStartStop: false,
            buildNavigation: true,
            autoPlay: true
        })
        .anythingSliderFx({
            '.caption-top'    : [ 'caption-Top', '50px' ],
        })
}
//Add modal functionality where class is set
$('.modal-inline').colorbox({transition:'elastic', speed:500, width:'80%', height:'50%', inline:true});
$('.modal-image').colorbox({transition:'elastic', speed:500, width:'80%', height:'50%', inline:false});
$('.modal-image-square').colorbox({transition:'elastic', speed:500, width:'1000', height:'1000', inline:false});
});
Источник

Я не думаю, что

$('.modal-inline').unbind('click').colorbox({transition:'elastic', speed:500, width:'80%', height:'50%', inline:true});

выполняется Я поставил точку останова на этом, и это не остановило.

По какой-то причине $('.model-inline') Селектор не находит элементов для преобразования в палитру цветов. Итак, вы добавляете элемент динамически после того, как селектор уже выполнен?

Если вы перейдете в консоль Chrome (Ctrl+Shift+j в Windows) и введите

$('.modal-inline').unbind('click').colorbox({transition:'elastic', speed:500, width:'80%', height:'50%', inline:true});

а затем нажмите на ссылку, тогда это работает!

Другим фактором может быть то, что страница недействительна, но я не видел такого раньше, из-за неверной разметки.

Источник

Просмотр вашего сайта с помощью Chrome DevTools подтверждает утверждение @andyb: к тегу класса 'modal-inline' не прикреплен прослушиватель событий.

Почему вы выполняете метод "unbind" по этой ссылке? ColorBox обрабатывает свои собственные привязки событий кликов для вас.

  • Кевин М.
Источник
Другие вопросы по тегам