Не могу вставить бхслайдер - слайды сходят с ума

[Zverushka]

Пытаюсь создать самый простой слайдер на основе бхслайдера.

В каталоге самый первый айтем - кнопка заказать - во всплывающем окне вкладка - фотографии.

Почему-то картинки ужимаются в 5 раз и выстраиваются в одну строку (. Уже час бьюсь - не понимаю в чем проблема!

http://zverushka.bl.ee

 

Я так посмотрю, если окошко браузера ресайзнуть - слайдер становится нормальным, но почему при загрузке такое все кривое?

Может потому что окно изначально скрыто? Надо на открытии слайдер активировать?

 

Вопрос только как получить хоть какой-нибудь ссылку на объект из всплыающего окна? 

afterLoad fancybox callback передает куррент - но я не могу из него получить ссылку на всплывающее окно!

 

П.С. Выкрутилась просто испльзую класс fancybox-inner

Edited November 28, 2013 by Zverushka

[Zverushka]

Пока выкрутилась этой функцией. Спасает толкьо 2х секундная задержка, иначе слайдер опять же не видит ширины, хотя теоретически модальное окно должно быть загружено. Так что на данный момент остался лишь вопрос - почему без задержки в функции бхслайдер не видит правильные разымеры слоев? Может callback фукнция бажная - анимация еще не закончилась??

	$(".list-catalog .btn-yellow").fancybox({		padding: 0,		afterShow: function(current, previous){						setTimeout(function(){				$(".fancybox-inner .bxslider").bxSlider({					pager: false				});				}, 2000);					}	});

Edited November 28, 2013 by Zverushka

[mishka]

ты скрываешь модальные окна через display: none и табы там так же. Запускаешь скрипт карусели когда у тебя эти блоки скрыты. Поэтому не получается просчитать их ширину.

 

варианты:

1) скрывать блоки абсолютами

2) скрывать модальные окна обернув их оберткой с ovrflow: hidden; height: 0; Но как ни крути а таб скрыт через дисплей нон.

3) при переключении табов рефрешить галлерею.

[Zverushka]

На табы я не подумала, но код выше работает с табами нормально. А это уже странно.

 

Блин, не фига он не работает, если тут же новую вкладку не открыть, теперь понятно. 

Епрст (((.

Edited November 28, 2013 by Zverushka

[mishka]

если ты откроешь лайтбокс, подождешь более 2х секунд, а потом перейдешь на таб с фото то получишь 5 фоток маленьких, так что это ты не "выкрутилась"

$(".tabs").tabs({	active: 0,	activate: function(e) {		var activeTab = $(e.currentTarget.hash);		activeTab.find('.bxslider').bxSlider({			pager: false		});	}});

[Zverushka]

$(".tabs").tabs({		active: 0,		activate: function(event, ui){						var $cur = ui.newPanel;									if ($cur.is(".photo")) {				if (!$cur.find(".bx-wrapper").is(".bx-wrapper")) {					$cur.find(".bxslider").bxSlider({						pager: false					});				}							}					}	});

Заработало. Скажите, в этом коде нет ущербности? Особенно волнует вот эта строка

if (!$cur.find(".bx-wrapper").is(".bx-wrapper")) {

[mishka]

if ($cur.is(".photo")) {

 

Лучше проверить на наличие класа:

if ($cur.hasClass('photo')

 

$cur.find(".bx-wrapper").is(".bx-wrapper") - разве это не возвращает всегда true?

 

так как $cur.find(".bx-wrapper") входит в набор $(".bx-wrapper")

можно сделать так:
 

$('.bxslider').each(function() {	var box = $(this);		var bxSlider = box.bxSlider({		pager: false,		slideWidth: 545	});		box.data('bxSlider', bxSlider);});

Ксожалению данный плагин не записывает свой апи в дату. Поэтому можно при его инициализации пройтись циклом, и апи записывать в дату.
А потом при смене табов рефрешить слайдер:

$(".tabs").tabs({	active: 0,	activate: function(event, ui){					var $cur = ui.newPanel;						if ($cur.hasClass("photo")) {			var bxSliderAPI = $cur.find(".bxslider").data('bxSlider');			if (bxSliderAPI) {				bxSliderAPI.reloadSlider();			}		}				}});

[Zverushka]

$cur.find(".bx-wrapper").is(".bx-wrapper") - разве это не возвращает всегда true?

 

Это true, если класс бхвраппер найден, и ложь, если он ничего не нашел и остался текущий класс $curr. Только я не знаю, тут лучше тогда оставить is или hasclass? Я вообще думала, что не найдет такой класс, то false будет, а так получается, что остается $cur в условии и приходится еще одну проверку делать через .is

 

Но так тоже не очень хорошо, допустим смотри, у нас 12 каталог айтемов скрытых и на них всех запустить слайдер - лишние тормоза только - уж не лучше ли инициализировать слайдер на запуске вкладки.

 

Про hasClass забыла, хорошая функция, тут лучше подходит, странно вообще как тогда is работает... По идее is более трудоемкий - он наверное выборку объекта делает?

Edited November 28, 2013 by Zverushka

[mishka]

Это true, если класс бхвраппер найден, и ложь, если он ничего не нашел и остался текущий класс $curr. Только я не знаю, тут лучше тогда оставить is или hasclass? Я вообще думала, что не найдет такой класс, то false будет, а так получается, что остается $cur в условии и приходится еще одну проверку делать через .is

Это всегда true если в табе есть блок с класом  .bx-wrapper. Только сделано как масло маслянное.

Проще выбрать элементы с таким класом: var bxWrapper = $cur.find(".bx-wrapper")

и проверить длинну коллекции: bxWrapper.length 

Если элементов нету, то  bxWrapper.length вернет 0, а if (0) не выполнится.

 

Но так тоже не очень хорошо, допустим смотри, у нас 12 каталог айтемов скрытых и на них всех запустить слайдер - лишние тормоза только - уж не лучше ли инициализировать слайдер на запуске вкладки.

можно и так. Только я на 90% уверен что если у тебя будет где-то слайдер, который не будет скрытым, то ты ему  дашь такой же класс, и глобально проинитишь так:
 

$('.bxslider').bxSlider({				pager: false,		slideWidth: 545	});

тоесть еще раз проинитишь слайдер для блоков в лайтбоксе. И если в плагине не предусмотрено чтобы 2 раза не инитить для одного элемента, то могут быть глюки. И снова будут вопросы почему так происходит.

$(".tabs").tabs({	active: 0,	activate: function(event, ui){		var $cur = ui.newPanel;				if ($cur.hasClass("photo")) {			var $curBxSlider = $cur.find(".bxslider");						if ($curBxSlider.length) {				var bxSliderAPI = $curBxSlider.data('bxSlider');				if (bxSliderAPI) {					bxSliderAPI.reloadSlider();				}			} else {				var bxSlider = $curBxSlider.bxSlider({					pager: false,					slideWidth: 545				});								$curBxSlider.data('bxSlider', bxSlider);			}		}	}});

в данном случае можно сделать так. При переключении проверять если такой элемент, и есть ли у него апи слайдера. Если есть то рефрешить слайдер, если нет то проинитить его.

[Zverushka]

Мишка большое спасибо - может заодно сможешь подсказать в этой теме - как сделать данные плагина джаваскрипт не перезаписывающимися? Я из-за этого не могу плагин для разных элементов одновременно запустить http://htmlforum.ru/index.php?showtopic=46784#entry312849

[mishka]

if ($curBxSlider.length) {				var bxSliderAPI = $curBxSlider.data('bxSlider');				if (bxSliderAPI) {					bxSliderAPI.reloadSlider();				}			} else {				var bxSlider = $curBxSlider.bxSlider({					pager: false,					slideWidth: 545				});								$curBxSlider.data('bxSlider', bxSlider);			}

я тут недосмотер, и неправильно написал. Надо так:

 

if ($curBxSlider.length) {	var bxSliderAPI = $curBxSlider.data('bxSlider');	if (bxSliderAPI) {		bxSliderAPI.reloadSlider();	} else {		var bxSlider = $curBxSlider.bxSlider({			pager: false,			slideWidth: 545		});				$curBxSlider.data('bxSlider', bxSlider);	}}