Конфликт fancybox и bxSlider
Вложений: 1
Всем привет!
Есть сайт: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 |
fenix_63,
если элементов $('.bxslider') много то slider = $('.bxslider').bxSlider будет ерунда пишите цикл по $('.bxslider') типа
$('.bxslider').each(function(indx, element){
var slider = $(element).bxSlider //...
});
|
дак даже с одним элементом $('.bxslider') не хочет работать ((((
|
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()
}
})
});
|
Вложений: 1
Немного видоизменил, теперь для 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,
<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>
|
Выложил на хостинг: http://trikolor-orenburg.ru
Даже модальное окно не появляется :( |
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)
|
Если вот сюда поместить ваш код:
$('.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 вызывать |
сейчас буду пробовать...
|
рони
вариант:
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)
действительно оказался рабочим !!! спасибо вам огромное!!! т.е. в итоге вот так всё это выглядит:
...
<script>
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)
</script>
<script>
$(document).ready(function(){
//Нужно для раскрытия вкладки "Я хочу купить триколор"
$('.buy').on('click', function(){
$('.cards').fadeIn();
});
});
</script>
......
<script>
$.get('modal_form.html', function(data){
$(data).insertBefore('.wrapper .load');
});
$.get('modals/modal_form2.html', function(data){
$(data).insertBefore('.wrapper .load');
});
$.get('modals/modal_form_3.html', function(data){
$(data).insertBefore('.wrapper .load');
});
$.get('modals/modal_form_4.html', function(data){
$(data).insertBefore('.wrapper .load');
});
$.get('modals/modal_form_5.html', function(data){
$(data).insertBefore('.wrapper .load');
});
$.get('modals/modal_form_6.html', function(data){
$(data).insertBefore('.wrapper .load');
});
$.get('modals/modal_form_7.html', function(data){
$(data).insertBefore('.wrapper .load');
});
$.get('modals/modal_form_8.html', function(data){
$(data).insertBefore('.wrapper .load');
});
</script>
выложил на хостинг http://trikolor-orenburg.ru/ Работает именно так, как надо, рони спасибо большое !!! |
fenix_63,
pagerCustom: $('[id="bx-pager"]').eq(indx)
но лучше класс, id уникальнои тогда
pagerCustom: $('.bx-pager').eq(indx)
|
понял, буду иметь ввиду, спасибо
|
fenix_63,
замена таймера
var count = 8;
function init()
{
//иницализация слайдеров
}
$.get('modal_form.html', function(data){
$(data).insertBefore('.wrapper .load');
count--;
if(!count) init()
});
|
Заметил ещё вот такой баг:
Когда жмём по ссылке "подробнее" у карточки товара, появляется модальное окно - тут всё нормально отображается, но слайдер почему то не рабочий: отображается большая картинка товара, и 3 маленьких сниху, но если по какой-либо из трёх маленьких кликнуть - то слайдер не "перелистывает" большую картинку, и почему то полностью закрывается всё модальное окно, и у других карточек товаров ссылка "подробнее" становится недоступной - по ней не кликнуть, блок с id="modal1" как был display:block, так в этом же состоянии и остался, и как бы закрывает собой остальные элементы страницы. Кто знает, подскажите пожалуйста, как это лечится? http://trikolor-orenburg.ru/ вот тут всё это лежит. |
Появился ещё вот такой вопрос: хочу сделать изображения товаров кликабельными - т.е. чтобы когда пользователь кликает по изображения товара - чтоб появлялось модальное окно с подробными характеристиками этого товара. Точно такой же функционал, как если бы пользователь нажал на ссылку "Подробнее".
Проблема вот в чём сейчас: я сделал такой функционал у 1-й карточки товара, и если кликнуть по картинке, то модальное окно с подробным описанием товара нормально открывается, и слайдер внутри нормально работает и "перелистывается". Но только ссылка "Подробнее" у этой карточки товара теперь открывает окно с неработающим слайдером - слайдер не загружает большое изображение товара, и не работает "перелистывание" изображений этого товара в модальном окне. Помогите народ пожалуйста, кто знает. Вот сам сайт: http://trikolor-orenburg.ru/ |
| Часовой пояс GMT +3, время: 16:13. |