Jump to content
  • 0

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


VIVA
 Share

Question

Ребят, помогите, пожалуйста, уже 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. Заранее всем спасибо, что дочитали до конца!

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

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

Вот код который есть в 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.

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

 

Link to comment
Share on other sites

  • 0

Думаю @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 by li4e
  • Like 2
Link to comment
Share on other sites

  • 0

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

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

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy