Подскажите в чем проблема? 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, время: 07:04. |