Плагин для создания модальных окон Magnific Popup

Модификации основанные на языке JavaScript.

Скрипты(Огромная галерея скриптов, на любой вкус и цвет)
Аватара пользователя
CabinetAdmin

Re: Плагин для создания модальных окон Magnific Popup

CabinetAdmin 14 ноя 2013, 14:16 Сообщение

X-DP
Плагин работает, панель появляется.
При установке этой формы, скрипт ставьте не между <head>, а перед </body>. И не забудьте подключить библиотеку jQuery и сам jquery.magnific-popup.js.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

stnd

Плагин для создания модальных окон Magnific Popup

stnd 01 май 2015, 21:36 Сообщение

Добрый день, очень рад что нашел Вашу тему об этом плагине. У меня в принципе получилось прикрутить его, но не могу понять один момент.
Почему встраиваемое видео не работает на локальной версии сайта? Но стоит залить его на хостинг, как тут же всё начинает работать.
Обьясните пожалуйста природу этого явления, иначе я сойду с ума. :) :)

stnd

Плагин для создания модальных окон Magnific Popup

stnd 01 май 2015, 22:17 Сообщение

И еще такой вопрос. Подскажите пожалуйста решение такой задачи при помощи jquery: есть картинка, при наведении курсора сменяется на другую, при клике - вызывается плагин Magnific Popup. Спасибо!

Аватара пользователя
CabinetAdmin

Плагин для создания модальных окон Magnific Popup

CabinetAdmin 02 май 2015, 07:00 Сообщение

stnd писал(а):Источник цитаты встраиваемое видео не работает на локальной версии сайта?

Если честно не пробовал на локалке... Попробую поставить этот плагин на локалке, посмотрю. Про видео, я так понимаю, подразумевается ютуб?

По поводу наведения. Может проще воспользоваться стилями? Например:

Код: Выделить всё

.popup-gallery a { position: relative; display: inline-block; } .popup-gallery a:hover:before { content: ''; background: url("./images/img.png") center no-repeat #fff; position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; }


Можно конечно и на jQuery сделать, например:

Код: Выделить всё

<script type="text/javascript"> $(document).ready(function() { $(".popup-gallery img").hover( function () { $(this).attr("src", "./images/img.png"); } ); }); </script>
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

stnd

Плагин для создания модальных окон Magnific Popup

stnd 02 май 2015, 17:28 Сообщение

Не работает ни вимео, ни ютуб. А вот гугл карты работают. Кстати, я под "не работает" имею ввиду то, что само окошко-то выпадает, а вот видео не подгружается.
Ну и к сожалению не хватает у меня знаний заставить работать ваши скрипты.

stnd

Плагин для создания модальных окон Magnific Popup

stnd 02 май 2015, 17:30 Сообщение

Нашел вот такой вариант реализации http://jsfiddle.net/GQZVR/
Думаю в крайнем случае использовать его, но хочется все-таки разобраться. К тому же там один бэкграунд под все тайлы, а мне надо под каждый уникальную картинку подкладывать.

CabinetAdmin, а за ответ в любом случае спасибо!

Аватара пользователя
CabinetAdmin

Плагин для создания модальных окон Magnific Popup

CabinetAdmin 02 май 2015, 21:31 Сообщение

stnd писал(а):Источник цитаты Нашел вот такой вариант реализации

Подобный вариант я дал выше, только на css. Аналогично варианту по ссылке при наведении на изображение будет добавляться картинка поверх существующей, единственное чего нет - прозрачности. Добавить не проблема - opacity: 0.9;, к .popup-gallery a:hover:before {. Код этот достаточно добавить в стилевой файл.

stnd писал(а):Источник цитаты К тому же там один бэкграунд под все тайлы, а мне надо под каждый уникальную картинку подкладывать.

Если честно, не совсем понимаю как такое реализовать... :scratch:
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

alegrans

Плагин для создания модальных окон Magnific Popup

alegrans 23 июн 2016, 18:14 Сообщение

CabinetAdmin,
Подскажите, пожалуйста, возможно ли вывести в модальном окне с размерами, меньше основного контейнера (чтобы была видна по краям сама страница), с помощью magnificPopup яндекс-карту?

Аватара пользователя
CabinetAdmin

Плагин для создания модальных окон Magnific Popup

CabinetAdmin 23 июн 2016, 20:31 Сообщение

К сожалению в списке поддерживаемых фреймов нет яндекса. Но можно попробовать запустить, есть даже небольшой пример - http://codepen.io/dimsemenov/pen/jnohA.

Надо пробовать... хм... :scratch:
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
CabinetAdmin

Плагин для создания модальных окон Magnific Popup

CabinetAdmin 23 июн 2016, 20:52 Сообщение

Плюс надо смотреть какие из ссылок будут работать. Вот к примеру набросал:

Код: Выделить всё

<script> $('.popup-yamaps').magnificPopup({ type: 'iframe', iframe: { patterns: { yamaps: { index: '//yandex.ru/maps/', src: '%id%' } } } }); </script>

Это для использования ссылки из адресной строки. Но во фрейме не хочет запускаться... :scratch:
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

alegrans

Плагин для создания модальных окон Magnific Popup

alegrans 24 июн 2016, 02:34 Сообщение

А не подскажите, как реализовано открытие яндекс-карты на вот этой странице:
http://2lagonaki.ru/sights/Ozero_Huko-22.html
это, конечно, не magnificPopup

Аватара пользователя
CabinetAdmin

Плагин для создания модальных окон Magnific Popup

CabinetAdmin 24 июн 2016, 16:39 Сообщение

Оказывается для запуска карт нужно ещё и к api карт подключаться.... Да уж...

Запуск яндекс карт в модальном окне Magnific Popup будет следующим.
Кнопка:

Код: Выделить всё

<a class="popup-yamaps" href="#yamaps">Open Map</a> <div id="yamaps" class="white-popup-block mfp-hide" style="height: 250px;"></div> <script type="text/javascript"> $(function() { $('.popup-yamaps').magnificPopup({ type: 'inline', preloader: false, focus: '#name', callbacks: { beforeOpen: function() { if($(window).width() < 700) { this.st.focus = false; } else { this.st.focus = '#name'; } } } }); }); </script>

В принципе вместе их не обязательно ставить, блок со скриптом можно разместить в футере страницы.

height: 250px; - высота окна.

Теперь api, перед </head> добавить:

Код: Выделить всё

<script src="//api-maps.yandex.ru/2.0/?load=package.standard&lang=ru-RU" type="text/javascript"></script> <script> var myMap; ymaps.ready(init); function init () { myMap = new ymaps.Map('yamaps', { center:[55.76, 37.64], // Москва zoom:10 }); document.getElementById('destroyButton').onclick = function () { myMap.destroy(); }; } </script>


Так же можно добавить элементы управления.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

alegrans

Плагин для создания модальных окон Magnific Popup

alegrans 24 июн 2016, 19:35 Сообщение

Большое спасибо за разъяснения.
Я никогда не использовал api карт
Скажите, пожалуйста, код с Вашей картой ( center:[55.76, 37.64], // Москва) работает.
А какой скрипт api можно использовать для того, чтобы выводить карту, размещенную на странице, ссылку на которую я Вам скинул?
Или это api создано владельцем этого сайта только для себя (для своего сайта) и на других сайтах установить такую же кнопку не получится? Т.е.: как установить такую же кнопку с попап окном карты как на этой ссылке у себя на сайте? И, если это возможно, то как Вы думаете: это будет корректно использовать их api у себя? Или надо самому делать карты с отметками?

Аватара пользователя
CabinetAdmin

Плагин для создания модальных окон Magnific Popup

CabinetAdmin 24 июн 2016, 21:03 Сообщение

Это api находится на сервере яндекса, его нужно подключать для отображения карты, т.е. для всех кто хочет работать с картой. Он для этого ими и создан. У них и краткие примеры и инструкции есть - https://tech.yandex.ru/maps/.

Чтобы открывать карту в таком окне, вам нужно установить сам плагин (скрипт и его стили), добавить код что я дал выше и всё. Вместо координат Москвы center:[55.76, 37.64], // Москва устанавливаете свои.
По умолчанию ширина окна у плагина меньше, но это работа пары правок кода.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

alegrans

Плагин для создания модальных окон Magnific Popup

alegrans 25 июн 2016, 03:30 Сообщение

Большое спасибо за помощь. Получилось, осваиваю API.
У Вас отличный сайт: принудительно добавил его сыну в избранное (учится на программиста).
Кстати, не могли бы Вы посоветовать пособие по PHP (сайт, книгу, курсы - в любой форме), где доходчиво, с нуля, "на пальцах" объясняется сама суть PHP (детали, типа синтаксиса, всегда можно уточнить в справочнике).
Успехов!



Вернуться в «JavaScript / jQuery»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость