Галерея для Pop-up

[VIVA]

Ребят, помогите, пожалуйста, уже 2й день зависаю над проблемой.

Я создал тестовый сайт для портфолио http://my-tasks.cu.cc/.

На сайте в разделе "Галерея" есть кнопка "Посмотри работу".
При нажатии на кнопку должно появиться Pop-up окно с галереей изображений ( смотреть тут http://prntscr.com/axydgn )

Но при нажатии кнопки появляется только такое окно ( смотреть тут http://prntscr.com/axyi4w ). Если нажать на стрелку "лево" или "право", то прогружается и сам слайдер. Без Pop-up слайдера все работает без проблем.

Сам слайдер я создал при помощи Slick Slider.
Pop-up установил Magnific-popup

Если кому нужен архив с файлами, вот он (https://drive.google.com/file/d/0Bw7AcCgqVY_HUVM4N3BqZDlMVW8/view)

 

Вопрос: Ребят, подскажите, может кто сталкивался с такой проблемой, как ее решить. Может кто-то знает другой слайдер для галереи который не конфликтует с Pop-up. Заранее всем спасибо, что дочитали до конца!

[klierik]

попробуй инициализировать slick после того как откроется popup

[VIVA]

Подскажи, а как это можно сделать, т.к. я еще учусь

Вот код который есть в JS  файле.

//Gallery Pop-Up
	$(".our_work_view").magnificPopup({type:"inline", midClick: true});
	
	//Slick Slider
	$('.slider-for').slick({
		slidesToShow: 1,
		slidesToScroll: 1,
		arrows: false,
		fade: true,
		asNavFor: '.slider-nav'
	});
	
	$('.slider-nav').slick({
		slidesToShow: 4,
		slidesToScroll: 1,
		asNavFor: '.slider-for',
		focusOnSelect: true
	});

Я пробовал:

- Менять порядок расположения кода в JS файле. Ставил вверх код Слайдера, а внизу поп-ап и наоборот.
- Пробовал в HTML при подключении скриптов слайдер подключать перед поп-апом и наоборот.
- Пробовал в JS файле код слайдера вставить в середину поп-апа, но фаербаг начал ругаться, что не находит фенкцию Slick.

Что еще можно попробовать ? Честно, очень задел данный вопрос и хотелось бы разобраться.

 

[li4e]

Думаю @klierik имел ввиду что-то вроде этого
 

$(".our_work_view").magnificPopup({type:"inline", midClick: true, callbacks: {open: initSliders}});
	
function initSliders() {
	$('.slider-for').slick({
		slidesToShow: 1,
		slidesToScroll: 1,
		arrows: false,
		fade: true,
		asNavFor: '.slider-nav'
	});
	
	$('.slider-nav').slick({
		slidesToShow: 4,
		slidesToScroll: 1,
		asNavFor: '.slider-for',
		focusOnSelect: true
	});
}

Попробуйте так

Edited April 28, 2016 by li4e

[VIVA]

Парни, ураааааа!!!!!!!! Работает!!!!!!

Вы не представляете как я рад. Я уже 2й день мучаюсь, пробовал другие поп-апы, разные комбинации. Часов 10 без перерыва точно просидел. У меня от радости аж слезы наворачиваются, но мужики не плачут.

Еще раз всем ОГРОМНОЕ СПАСИБО! Вы сделали меня счастливым!
 

[klierik]

А в чём именно проблема у тебя была понял? В тот момент когда ты инициализировал галерею -- она было скрыта, не видима. Соответственно просчитать параметры галереи, в таком случае, невозможно. Но, если ее инициализировать после того, как уже показался попал, то есть разметка галереи показывается, то скрипт сделает просчеты правильно,