Форум

fenix_63 · #1 (**permalink**) 09.09.2017, 15:20

Всем привет!

Есть сайт:http://trikolor-orenburg.ru/

Когда нажимаем на блок "Я хочу купить триколор" - появляются карточки с товарами. Если в какой-либо из этих карточек нажать на ссылку "подробнее" - появляется модальное окно с подробным описанием конкретного товара, но! туда я вставляю слайдер - bxslider, но он почему то не хочет работать. Есть большая картинка, которая отображает сам товар, и есть 3 маленьких, щелкая на которые, мы как бы перелистываем на другой слайд. Так вот, эта "большая" картинка совсем не перелистывается, т.е. слайдер попросту не работает в модальном окне.

Вычитал что инициализацию слайдера надо делать после того, как модальное окно появится - я так пробовал, что то всё равно не получается. Пробовал делать перезагрузку слайдера внутри функции afterShow fancybox() и пробовал делать reloadSlider при клике на ссылку "подробнее" - всё равно он не хочет работать.

Народ, кто сталкивался с этим, помогите пожалуйста, как это лечится? Подробнее во вложении.

Код index.html (до тега <body>):

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
        <title>Триколор ТВ Оренбург. Обменять, купить спутниковое оборудование в магазине компании Спутник, онлайн-заказ</title>
        <meta name="keywords" content="Вы можете обменять, купить спутниковое оборудование Триколор в нашем магазине" />
        <meta name="description" content="Фирменный магазин Триколор ТВ предлагает вам купить или обменять спутниковое оборудование." />
        <link rel="stylesheet" href="assets/css/uikit.css" />
        <link rel="stylesheet" type="text/css" href="assets/css/custom.css">
        <link rel="stylesheet" type="text/css" href="assets/css/jquery.fancybox.css">
        <link rel="stylesheet" type="text/css" href="assets/css/jquery.bxslider.css">
        <script src='https://www.google.com/recaptcha/api.js' async defer></script>
        <script src="assets/js/jquery.js"></script>
        <script src="assets/js/uikit.min.js"></script>
        <script src="assets/js/uikit-icons.js"></script>
        <script src="assets/js/jquery.fancybox.js"></script>
        <script src="assets/js/jquery.bxslider.js"></script>
        <script src="assets/js/prod_desc_fancy.js"></script>
 
        <script>
            $(document).ready(function(){
 
 
                slider = $('.bxslider').bxSlider({
                  pagerCustom: '#bx-pager'
                });
 
                //Вызов модального окна для детального просмотра товара
                $('.trigger').fancybox({
                    afterShow: function(){
                        
                        slider.reloadSlider();
                    }
                });
 
                
 
 
                
                
 
                //var $number;
 
 
                $('.trigger').on('click',function(){
                    slider.reloadSlider();
                });
 
 
                //Вызов формы обратного звонка
                $('#modal').on('click','a.myButton',function(){
 
                    $('.fancybox-container').css({"display":"none"});
                    $('#modal1').fadeIn();
                });
 
 
 
 
                $('form').submit(function(e){
                    var $form = $(this);
 
                    $.ajax({
                        type: $form.attr('method'),
                        url: $form.attr('action'),
                        data: $form.serialize()
                    }).done(function(result){
                        alert('Сообщение успешно отправлено!' + result);
                        $('#modal1').fadeOut('slow', function(){
                            
                        });
 
                    }).fail(function(result){
                        alert('Ошибка при отправке сообщения!' + result);
                    });
 
                    //отмена действия по умолчанию для кнопки submit
                    e.preventDefault();
                });
 
 
                //Делаем поле телефона обязательным для заполнения
                $('input[name=phone]').on('input keyup',function(e){
                    if($(this).val()=='')
                        $('form input[type=submit]').prop('disabled',true);
                    else
                        $('form input[type=submit]').prop('disabled',false);    
                });
 
 
                $('.buy').on('click', function(){
                    $('.cards').fadeIn();
                });
 
                $('.change').on('click', function(){
                    $('html, body').animate({
                        scrollTop: $("#exchange").offset().top - 100
                    }, 1000);
                });
                
            });
        </script>
 
        
        <style type="text/css">
<!--
.style1 {color: #FF0000}
-->
        </style>
</head>

Код самой карточки товара:

....
 
<div class="item_1">
                    <div class="uk-card uk-card-default uk-card-body product">
                        <div class="product-photo">
                            <img src="images/body/GS 591 1.png" width="216" height="163" />                 
                        </div>
                    
                        <div class="product-desc">
                            <div class="desc">
                                Спутниковый ресивер-клиент Триколор ТВ GS-С5911<br/>
                            </div>
                            <div class="price">
                                3 900 <span>руб</span>
                            </div>
                            <a href="#" class="myButton" uk-toggle="target:#modal1">купить</a>
                            <a href="#modal"  class="trigger read_more">подробнее</a>
                        </div>
 
                    </div>
            </div>
 
....

https://fotki.yandex.ru/next/users/t...2/view/1013143

рони · #2 (**permalink**) 09.09.2017, 15:34

fenix_63,
если элементов $('.bxslider') много то slider = $('.bxslider').bxSlider будет ерунда пишите цикл по $('.bxslider')
типа

$('.bxslider').each(function(indx, element){
      var  slider = $(element).bxSlider //...


      });

fenix_63 · #3 (**permalink**) 09.09.2017, 16:27

дак даже с одним элементом $('.bxslider') не хочет работать ((((

рони · #4 (**permalink**) 09.09.2017, 19:24

fenix_63,
все остальные строки (fancybox, trigger, bxSlider)убрать, возможно надо будет уточнять, где находится "#bx-pager"

$(".bxslider").each(function(indx, element) {
    var slider = $(element).bxSlider({
        pagerCustom: "#bx-pager"
    });
    $(".trigger").eq(indx).fancybox({
        onComplete: function(a) {
            slider.reloadSlider()
        }
    })
});

fenix_63 · #5 (**permalink**) 09.09.2017, 19:26

Немного видоизменил, теперь для 1-й карточки слайдер нормально работает, а вот для остальнх размер сменяющейся картинки (высота) вообще стала в 0.

Вот скриншот: https://fotki.yandex.ru/next/users/t...2/view/1013187

Вот код index.html:

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
        <title>Триколор ТВ Оренбург. Обменять, купить спутниковое оборудование в магазине компании Спутник, онлайн-заказ</title>
		<meta name="keywords" content="Вы можете обменять, купить спутниковое оборудование Триколор в нашем магазине" />
        <meta name="description" content="Фирменный магазин Триколор ТВ предлагает вам купить или обменять спутниковое оборудование." />
        <link rel="stylesheet" href="assets/css/uikit.css" />
        <link rel="stylesheet" type="text/css" href="assets/css/custom.css">
        <link rel="stylesheet" type="text/css" href="assets/css/jquery.fancybox.css">
        <link rel="stylesheet" type="text/css" href="assets/css/jquery.bxslider.css">
        <script src='https://www.google.com/recaptcha/api.js' async defer></script>
        <script src="assets/js/jquery.js"></script>
        <script src="assets/js/uikit.min.js"></script>
        <script src="assets/js/uikit-icons.js"></script>
        <script src="assets/js/jquery.fancybox.js"></script>
        <script src="assets/js/jquery.bxslider.js"></script>
        <script src="assets/js/prod_desc_fancy.js"></script>

        <script>
        	$(document).ready(function(){


                slider = $('.bxslider').bxSlider({
                  pagerCustom: '#bx-pager'
                });

                //Вызов модального окна для детального просмотра товара
                $('.trigger').fancybox({

                    
                    'onComplete': function(){
                        
                        slider = $('.bxslider').bxSlider({
                          pagerCustom: '#bx-pager'
                        });

                    }
                });

                


                
                

                //var $number;


                $('.trigger').on('click',function(){
                    //slider.reloadSlider();
                });


                //Вызов формы обратного звонка
                $('#modal').on('click','a.myButton',function(){

                    $('.fancybox-container').css({"display":"none"});
                    $('#modal1').fadeIn();
                });




        		$('form').submit(function(e){
        			var $form = $(this);

        			$.ajax({
        				type: $form.attr('method'),
        				url: $form.attr('action'),
        				data: $form.serialize()
        			}).done(function(result){
        				alert('Сообщение успешно отправлено!' + result);
        				$('#modal1').fadeOut('slow', function(){
        					
        				});

        			}).fail(function(result){
        				alert('Ошибка при отправке сообщения!' + result);
        			});

        			//отмена действия по умолчанию для кнопки submit
        			e.preventDefault();
        		});


        		//Делаем поле телефона обязательным для заполнения
        		$('input[name=phone]').on('input keyup',function(e){
        			if($(this).val()=='')
        				$('form input[type=submit]').prop('disabled',true);
        			else
        				$('form input[type=submit]').prop('disabled',false);	
        		});


                $('.buy').on('click', function(){
                    $('.cards').fadeIn();
                });

                $('.change').on('click', function(){
                    $('html, body').animate({
                        scrollTop: $("#exchange").offset().top - 100
                    }, 1000);
                });
                
        	});
        </script>

        
        <style type="text/css">
<!--
.style1 {color: #FF0000}
-->
        </style>
</head>

Попробовал использовать метод onComplete - сработало, но только для 1-й карточки товара. Походу и правда надо как то циклом делать.

fenix_63 · #6 (**permalink**) 09.09.2017, 19:30

рони попробовал так как ты предлагаешь сделать - вообще модальное окно перестало открываться

рони · #7 (**permalink**) 09.09.2017, 19:50

fenix_63,

<script>
$(document).ready(function() {
    $(".bxslider").each(function(indx, element) {
        var slider = $(element).bxSlider({
            pagerCustom: "#bx-pager"
        });
        $(".trigger").eq(indx).fancybox({
            onComplete: function(a) {
                slider.reloadSlider()
            }
        })
    });
    $("form").submit(function(e) {
        var $form = $(this);
        $.ajax({
            type: $form.attr("method"),
            url: $form.attr("action"),
            data: $form.serialize()
        }).done(function(result) {
            alert("Сообщение успешно отправлено!" +
                result);
            $("#modal1").fadeOut("slow", function() {})
        }).fail(function(result) {
            alert("Ошибка при отправке сообщения!" + result)
        });
        e.preventDefault()
    });
    $("input[name=phone]").on("input keyup", function(e) {
        if ($(this).val() == "") $("form input[type=submit]").prop("disabled", true);
        else $("form input[type=submit]").prop("disabled", false)
    });
    $(".buy").on("click", function() {
        $(".cards").fadeIn()
    });
    $(".change").on("click", function() {
        $("html, body").animate({
            scrollTop: $("#exchange").offset().top - 100
        }, 1E3)
    })
});


</script>

<script>
          $.get('modal_form.html', function(data){
         $(data).insertBefore('.wrapper .load');
     });
     </script>

fenix_63 · #8 (**permalink**) 09.09.2017, 20:56

Выложил на хостинг: http://trikolor-orenburg.ru
Даже модальное окно не появляется

рони · #9 (**permalink**) 09.09.2017, 21:10

fenix_63,
код надо запускать когда все блоки загрузились
попробуйте так

$(window).on("load", function() {
    $(".bxslider").each(function(indx, element) {
                    var slider = $(element).bxSlider({
                        pagerCustom: "#bx-pager"
                    });
                    $(".trigger").eq(indx).fancybox({
                        onComplete: function(a) {
                            slider.reloadSlider()
                        }
                    })
                });
})

не поможет тогда так

window.setTimeout(function() {
    $(".bxslider").each(function(indx, element) {
                    var slider = $(element).bxSlider({
                        pagerCustom: "#bx-pager"
                    });
                    $(".trigger").eq(indx).fancybox({
                        onComplete: function(a) {
                            slider.reloadSlider()
                        }
                    })
                });
}, 3000)

fenix_63 · #10 (**permalink**) 09.09.2017, 21:14

Если вот сюда поместить ваш код:

$('.trigger').on('click',function(){
                    $(".bxslider").each(function(indx, element) {
                        var slider = $(element).bxSlider({
                            pagerCustom: "#bx-pager"
                        });
                        $(".trigger").eq(indx).fancybox({
                            onComplete: function(a) {
                                slider.reloadSlider()
                            }
                        })
                    });
                });

То срабатывает, но со 2-го клика по ссылке подробнее.

И если дальше по коду раскомментировать например подгрузку для 2-й карточки:

$.get('modals/modal_form2.html', function(data){

        $(data).insertBefore('.wrapper .load');
        
    });

то срабатывать будет тоже, только со 2-го клика по ссылке, и только для той ссылке, по которой щелкнули первой после загрузки страницы, а для других товаров большая картинка в модальном окне будет пустой:

https://fotki.yandex.ru/next/users/t...2/view/1013187

Я так думаю может как то вызывать в методе afterClose у fancybox сброс bxSlider'а или переменную slider в null ставить при закрытии модального окна, а при открытии инициализировать заново, или reload вызывать

Форум

Справочник

Discord чат

Курсы javascript