Подскажите в чем проблема? colorbox и bxslider
Всем добрый день.
В общем суть проблемы такая. Есть страница с контентом. Есть несколько ссылок при нажатии на которые Colorbox открывает скрытые блоки - inline. для каждой ссылки свой блок. В каждом блоке есть слайдер (BxSlider). для того чтоб он работал в inline приходится делать так:
$(document).ready(function(){
$(".balls").colorbox({inline:true, width:"980px"});
$(".pears").colorbox({inline:true, width:"980px"});
$('.cboxElement').colorbox({onComplete:function(){
$('#bxslider-1').bxSlider({
pagerCustom: '#bx-pager-1',
mode: 'fade',
infiniteLoop: false,
controls: false,
pagerActiveClass: 'pager-active',
startingSlide: 0,
speed: 0,
});
$('#bxslider-2').bxSlider({
pagerCustom: '#bx-pager-2',
mode: 'fade',
infiniteLoop: false,
controls: false,
pagerActiveClass: 'pager-active',
startingSlide: 0,
speed: 0,
});
}});
И если допустим на основной странице всего одна ссылка с inline блоком, то слайдер работает корректно., а вот если несколько, то начинаются проблемы: При нажатии на на любую ссылку первый раз - все ок. после закрытия этого inlne блок и нажатии на другую ссылку изображения слайдера пропадают и уже слайдер не работает ни в первом блоке, ни во втором -ни в каком.... Как воспроизвести ошибку: нажмите на мячик, откроется колорбокс со слайдерам, если покликать по превьюшкам - все будет переключаться. Закройте окно. Кликните на зеленую грушу (большой картинки не будет, останутся не активные превьюшки, причем прижатые к верху страницы).... закройте окно. Потом нажмите опять на мячик (и тут слайдер который работал тоже накрывается... превьюшки есть, большой картинки нет...) Остальные блоки не работают. Помогите пожалуйста... в чем может быть проблема? |
a69,
лишние запятые для начала уберите |
|
Рони, спасибо большое, за ссылку и чистку кода. :)
Вопрос закрыт. Решение оказалось следующим: проблема была во встроенных стилях BxSlider... у дива bx-viewport был height="0" Эта высота рассчитывается в коде самого слайдера. Перекрыл их в CSS. И еще раз спасибо, рони!!! Его решение работает и без правки css! главное правильно вызывать функцию. К сожалению я ЯваСкрипт не знаю, но к счастью, рони помог! Большое Вам спасибо! |
| Часовой пояс GMT +3, время: 17:12. |