Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Подскажите в чем проблема? colorbox и bxslider (https://javascript.ru/forum/jquery/47981-podskazhite-v-chem-problema-colorbox-i-bxslider.html)

a69 15.06.2014 01:22

Подскажите в чем проблема? 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 блок и нажатии на другую ссылку изображения слайдера пропадают и уже слайдер не работает ни в первом блоке, ни во втором -ни в каком....

Как воспроизвести ошибку: нажмите на мячик, откроется колорбокс со слайдерам, если покликать по превьюшкам - все будет переключаться. Закройте окно. Кликните на зеленую грушу (большой картинки не будет, останутся не активные превьюшки, причем прижатые к верху страницы).... закройте окно. Потом нажмите опять на мячик (и тут слайдер который работал тоже накрывается... превьюшки есть, большой картинки нет...)

Остальные блоки не работают.

Помогите пожалуйста... в чем может быть проблема?

рони 15.06.2014 02:07

a69,
лишние запятые для начала уберите

рони 15.06.2014 02:45

a69,
http://learn.javascript.ru/play/VywIAb

a69 15.06.2014 02:55

Рони, спасибо большое, за ссылку и чистку кода. :)


Вопрос закрыт.
Решение оказалось следующим:
проблема была во встроенных стилях BxSlider... у дива bx-viewport был height="0" Эта высота рассчитывается в коде самого слайдера.
Перекрыл их в CSS.

И еще раз спасибо, рони!!! Его решение работает и без правки css! главное правильно вызывать функцию. К сожалению я ЯваСкрипт не знаю, но к счастью, рони помог! Большое Вам спасибо!


Часовой пояс GMT +3, время: 07:04.