Всем привет!
Есть сайт:
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