Створюємо спливаючі вікна для сайту - magnific popup
Взагалі хотілося б відзначити, що Magnific дуже популярний, як в рунеті, так і в буржуйнете, не дивлячись на те, що розробник украінскоговорящій. Загалом, Magnific Popup заслужив те, щоб я про нього написав окремий пост.
Ось основні переваги плагіна, які я можу виділити від себе:
- Легкість і модульність. Мінімізована версія скрипта з усіма включеними модулями важить всього лише
Підключення Magnific Popup
Підключити плагін і почати працювати з ним досить просто. Взагалі на сайті є докладна документація. правда вона англійською. Але я скажу вам - щоб займатися веб-розробкою вкрай важливо знати англійську мову на технічному рівні. Без цього нікуди. Для мене особисто не складає труднощів вивчити документацію по скриптам англійською мовою. Врешті-решт є також гугл перекладач. яким можна скористатися, якщо щось незрозуміло.
У даній статті я розгляну тільки ті моменти модальних вікон, з якими я розібрався і які активно впроваджую в процесі розробки сайтів. І так давайте почнемо.
Підключаємо файл плагіна і файл стилів Magnific Popup. Якщо у вас не підключена бібліотека jQuery, то обов'язково слід підключити і її. Загалом, тут підключення нічим не відрізняється від підключення будь-якого іншого скрипта jQuery. Про підключення стилів і скриптів я написав окрему статтю. раджу її почитати.
Типи модальних вікон
Тип вмісту у вікні - Inline
Далі нам слід ініціювати наш плагін. Для цього нам потрібно визначитися з типом спливає контенту. Давайте викличемо в модальному вікні звичайний текст. Тоді код інціалізаціі буде для контенту з типом - Inline.
І ще дещо. Для того, щоб наше вікно стало видно нам необхідно в файл стилів «magnific-popup.css» додати наступний код:
Дане правило задає фоновий колір вікна і відступи. Їх спочатку його немає в файлі стилів, тому що саме вікно можна оформити на свій розсуд.
Читайте також: Фреймворк Twitter Bootstrap - що це таке?
В результаті у нас відкривається модальне вікно з нашим текстом. Все досить просто.
Заур, привіт. Ось у мене руки до свого сайту не дійшли, а от ви - молодець.
Питання таке.
Я сьогодні зіткнувся з цим плагіном в перший раз. В принципі нічого складного. Мені треба зробити Галерею з фотографій з динамічної завантаженням контенту (кнопка Завантажити ще).
Завантажується сторінка, запускається плагін, все працює. Тепер тиснемо «Завантажити ще», додаються ще фотографії і треба додати їх до цієї ж галереї в спливаючому вікні. Ось як би це правильно зробити?
Т. е. Зараз я просто беру і ще раз не започатковано magnificPopup (...)
Це правильно? Все працює, але щось не подобається мені 2 рази і більше вішати до одних і тих же елементів плагін. Треба б спочатку якось почистити, напевно. Чи ні? Я не в курсі як воно працює, але може ви знаєте або робили.
Є очищення кешу
$ .magnificPopup.instance.popupsCache = <>;
Вона щось дає в етмо плані?
Вітаю! Показати ще - має на увазі завантаження фотографій за допомогою ajax. В цьому випадку потрібно викликати плгін знову, коли відпрацює ajax. Якщо у вас з ajax немає проблем, то думаю розберетеся + документація розробника допоможе. Я ж таке не реалізовував.
Ну я саме так і зробив. І все работет прекрасно, але мене бентежить, що я повторно викликаю на старі елементи. А якщо зробити тільки на нові, то це буде 2 різних непересічних галереї.
Або, я так думаю, він вішає події click на посилання, а потім при повторному виклику, вішає нові події, які затирають старі. Треба перевірити, чи можна повісити 2 події click на 1 елемент. Ніколи в цю сторону не думав.
Ви на ajax це зможете реалізувати? Тут знання потрібні!
Так я вже все реалізував і все працює. Просто у мене закралися сумніви і я спочатку почитав сайт розробника, як разплагініть назад, нічого такого там не знайшов (вчитувався) і почав гуглити, знайшов ваш сайт.
Адже мало зробити, щоб працювало, хочеться, щоб працювало правильно.
Гаразд, спасибі за відповіді. Я ще трохи подумаю і не буду втрачати час, а то завис тут з надуманою проблемою.