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

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

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

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

CabinetAdmin 27 авг 2013, 18:59 Сообщение

Magnific Popup - это бесплатный адаптивный jQuery lightbox-плагин, в котором основной упор сделан на производительность и предоставление наилучшего отображения всплывающего окна в независимости от того с какого устройства пользователь открыл страницу.
Обновляйте содержимое внутри лайтбокса, не беспокоясь о том, как оно будет изменять размеры и расположение окна.

Плагин имеет возможность автоматически переключаться на альтернативное отображение на мобильных устройствах при небольшом размере экрана. По умолчанию, элементы управления реализованы на чистом CSS, без внешней графики. Для переходов изображений используется CSS3 вместо медленной анимации JavaScript. Переходы можно настраивать при помощи CSS3 так как вам нравится. Плагин позволяет загружать в lightbox-окно видео, карты, формы и контент из других источников при помощи AJAX.

magnific-popup.rar
(15.18 КБ) 1656 скачиваний


Подключение плагина.
В архиве находятся всего два файла: стили и файл скрипта. Закачиваете файлы на форум. В шаблоне overall_header.html в <head> ставим:

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

<link rel="stylesheet" href="путь до файла/magnific-popup.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


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

В шаблоне overall_footer.html перед закрывающим тегом</body> ставим:

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

<script src="путь до файла/jquery.magnific-popup.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.popup-gallery').magnificPopup({ delegate: 'a', type: 'image', tLoading: 'Loading...', mainClass: 'mfp-img-mobile', gallery: { enabled: true, navigateByImgClick: true, preload: [0,1] // Will preload 0 - before current, and 1 after the current image }, image: { tError: '<a href="%url%">The image</a> could not be loaded.', titleSrc: function(item) { return item.el.attr('title') + '<small></small>'; } } }); }); </script>



Открытие вложений с помощью Magnific Popup, открываем шаблон attachment.html, находим:

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

<!-- IF _file.S_THUMBNAIL --> <dl class="thumbnail"> <dt><a href="{_file.U_DOWNLOAD_LINK}"><img src="{_file.THUMB_IMAGE}" alt="{_file.DOWNLOAD_NAME}" title="{_file.DOWNLOAD_NAME} ({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}" /></a></dt> <!-- IF _file.COMMENT --><dd> {_file.COMMENT}</dd><!-- ENDIF --> </dl> <!-- ENDIF -->


В найденном <dl class="thumbnail"> меняем на <dl class="thumbnail popup-gallery">, чуть ниже <a href="{_file.U_DOWNLOAD_LINK}"> меняем на <a href="{_file.U_DOWNLOAD_LINK}" title="{_file.DOWNLOAD_NAME}">.

Всё, все вложения будут открываться в лайтбоксах.

Во время загрузки большого изображения посередине экрана будет надпись Loading..., которую можно заменить на своё изображение, для этого в настройках скрипта:

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

tLoading: 'Loading...',


замените Loading... на <img src="изображение" alt="Loading..." />.
Например - Изображение такое изображение.

Имя изображения, которое отображается сразу под фотографией в развёрнутом виде, формируется из title, именно для этого мы добавили title="{_file.DOWNLOAD_NAME}" для ссылки на полное изображение, вместо имени можно использовать {_file.COMMENT} - будет выводиться комментарий к файлу, {_file.U_DOWNLOAD_LINK} - будет показана ссылка на изображение.
Под именем изображения есть ещё одно поле, которое можно настроить через скрипт:

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

return item.el.attr('title') + '<small></small>';

вы можете указать адрес вашего форума, а можно вывести данные фотографии, её вес и количество скачиваний(просмотров), для этого открываете attachment.html, находите ранее изменённый кусок кода:

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

<a href="{_file.U_DOWNLOAD_LINK}" title="{_file.DOWNLOAD_NAME}">

меняете на:

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

<a href="{_file.U_DOWNLOAD_LINK}" title="{_file.DOWNLOAD_NAME}" data-source="Вес: {_file.FILESIZE} {_file.SIZE_LANG} {_file.L_DOWNLOAD_COUNT}">


В настройках скрипта находите:

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

return item.el.attr('title') + '<small></small>';

меняете на:

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

return item.el.attr('title') + '<small>'+item.el.attr('data-source')+'</small>';



Плагин для создания модальных окон Magnific Popup - magnific-popup.png







Открытие изображение в лайтбоксе вложенных с помощью bbcode.
Создаём ббкод:

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

[image]{URL}[/image]

Замена HTML:

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

<span class="popup-gallery"><a href="{URL}" title="{URL}"><img src="{URL}" alt="{URL}" style="max-width: 150px; max-height: 150px;" /></a></span>


Либо:

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

[image={URL}]{TEXT}[/image]

Замена HTML:

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

<span class="popup-gallery"><a href="{URL}" title="{URL}">{TEXT}</a></span>


В этом варианте вместо уменьшенного изображения можно указать текст или своё уменьшенное изображение.






Открытие роликов из youtube.com, vimeo.com или гугл карт в лайтбоксе.
Создаём ббкод:

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

[yt]{TEXT}[/yt]


Замена HTML:

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

<a class="popup-youtube popup-vimeo popup-gmaps" href="{TEXT}">{TEXT}</a>


Открываем шаблон overall_footer.html находим ранее установленный скрипт, перед:

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

}); </script>


Ставим:

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

$('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({ disableOn: 700, type: 'iframe', mainClass: 'mfp-fade', removalDelay: 160, preloader: false, fixedContentPos: false });


В тему стиля добавляете:

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

/** * Simple fade transition */ .mfp-fade.mfp-bg { opacity: 0; -webkit-transition: all 0.15s ease-out; -moz-transition: all 0.15s ease-out; transition: all 0.15s ease-out; } .mfp-fade.mfp-bg.mfp-ready { opacity: 0.8; } .mfp-fade.mfp-bg.mfp-removing { opacity: 0; } .mfp-fade.mfp-wrap .mfp-content { opacity: 0; -webkit-transition: all 0.15s ease-out; -moz-transition: all 0.15s ease-out; transition: all 0.15s ease-out; } .mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; } .mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; }



Поддержка браузеров.

Плагин протестирован на десктопных версиях следующих браузеров: Chrome, Safari, FF, Opera, IE8+, частично поддерживает IE7 (работает, но некоторые визуальные возможности, такие как вертикальное центрирование, отсутствуют). Мобильные браузеры: поддерживаются дефолтные браузеры в Android 2.3+, iOS5+, Blackberry 10+, WP7+, mobile Opera и Chrome в Android.

Последнюю и актуальную версию можно скачать у автора проекта github
Последний раз редактировалось CabinetAdmin 10 ноя 2013, 08:44, всего редактировалось 1 раз.
Причина: Внесены изменения для вывода данных изображения (вес, просмотр)
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

MarishkaM

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

MarishkaM 21 сен 2013, 21:20 Сообщение

Это будет что-то вроде форумской загрузки? Если загрузить фото с другого фотохостинга, то будет работать? ))

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

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

CabinetAdmin 22 сен 2013, 05:49 Сообщение

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

MarishkaM

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

MarishkaM 22 сен 2013, 10:41 Сообщение

Спасибо. :Rose:
А можно сделать, чтобы фото открывалось более мягко. :oops:

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

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

CabinetAdmin 22 сен 2013, 10:53 Сообщение

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

MarishkaM

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

MarishkaM 22 сен 2013, 11:11 Сообщение

CabinetAdmin » 13 минут назад писал(а):... А это как?

Скрытый текст. Необходимо зарегистрироваться.

И еще, у Вас при наведении на фото, появляется значок, у меня нету такого. :(
Вот этот кусочек мне тоже не совсем понятно, что на что менять. :oops:
Имя изображения, которое отображается сразу под фотографией в развёрнутом виде, формируется из title, именно для этого мы добавили title="{_file.DOWNLOAD_NAME}" для ссылки на полное изображение, вместо имени можно использовать {_file.COMMENT} - будет выводиться комментарий к файлу, {_file.U_DOWNLOAD_LINK} - будет показана ссылка на изображение.

Возможно ли сделать такую загрузку вместо • Добавить изображение, а то ни всем пользователям будет понятно, что и куда нужно прописывать...

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

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

CabinetAdmin 22 сен 2013, 13:55 Сообщение

MarishkaM » Сегодня, 14:11 писал(а):Примерно так

Так нет, к сожалению.

Значок, это уже моя доработка, добавьте в тему стиля:

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

.popup-gallery img { cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; }


MarishkaM » Сегодня, 14:11 писал(а):Вот этот кусочек мне тоже не совсем понятно

В открытом виде, под изображением, есть два поля, в первом содержится имя изображения, которое получается из правки в attachment.html:

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

<a href="{_file.U_DOWNLOAD_LINK}" title="{_file.DOWNLOAD_NAME}">

Имя даётся из title, если содержимое title заменить, например, на {_file.U_DOWNLOAD_LINK}, то вместо имени будет выведена ссылка на изображение. Можно поставить что нибудь другое, можно вообще удалить и имени изображения не будет. Это как говорится на вкус и цвет.

Во втором, то что содержится между <small></small, в настройках скрипта, который находится в overall_footer.html:

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

return item.el.attr('title') + '<small></small>';
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

MarishkaM

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

MarishkaM 22 сен 2013, 15:14 Сообщение

Еще момент один подскажите. :oops:
Если в данный код заключены 30 фотографий на одной странице, то их все приходится смотреть. Можно это изменить, что бы только в одном сообщении (например 5 штук) просматривались только 5 фотографий, а не все 30. ))

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

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

CabinetAdmin 22 сен 2013, 15:30 Сообщение

Да, есть такой момент... Надо посмотреть код......

В настройках скрипта есть такая строчка:

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

enabled: true,

изменение true на fasle запретит просмотр всех изображений...


добавлено автором


Решение. Установка будет немного другой, скрипт:

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

<script src="путь до файла/jquery.magnific-popup.js"></script>

устанавливаем перед </head> в шаблоне overall_header.html

Скрипт:

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

<script type="text/javascript"> $(document).ready(function() { $('.popup-gallery').magnificPopup({ delegate: 'a', type: 'image', tLoading: 'Loading...', mainClass: 'mfp-img-mobile', gallery: { enabled: true, navigateByImgClick: true, preload: [0,1] // Will preload 0 - before current, and 1 after the current image }, image: { tError: '<a href="%url%">The image</a> could not be loaded.', titleSrc: function(item) { return item.el.attr('title') + '<small></small>'; } } }); }); </script>

ставим в шаблоне viewtopic_body.html перед:

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

</div> <hr class="divider" /> <!-- END postrow -->


В начале скрипта добавляете #p{postrow.POST_ID}:

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

$('#p{postrow.POST_ID} .popup-gallery').magnificPopup({
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

MarishkaM

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

MarishkaM 22 сен 2013, 16:39 Сообщение

Все, что было установлено раньше - удалять?

Куда этот скрипт ставить? <script src="путь до файла/jquery.magnific-popup.js"></script>

Все, я запуталась.., у меня на форуме не работают ни фото ни видео... :(

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

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

CabinetAdmin 22 сен 2013, 16:52 Сообщение

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

MarishkaM

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

MarishkaM 22 сен 2013, 16:56 Сообщение

Удалила в футере, все равно не работает. :(
Видео работает. Фото тоже (вроде), но снова просматриваются все фотографии. Т.е. нет лимита, например 5 и все. :(
Последний раз редактировалось MarishkaM 22 сен 2013, 17:05, всего редактировалось 3 раза.

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

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

CabinetAdmin 22 сен 2013, 17:02 Сообщение

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

MarishkaM

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

MarishkaM 22 сен 2013, 17:08 Сообщение

Это оставляем в overall_header.html?

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

<link rel="stylesheet" href="http://povodok.greatforum.ru/storage/povodok_greatforum_ru/images/magnific-popup.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


И то, что было в теме стиля не убирать?

Вот еще что появилось:


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

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

CabinetAdmin 22 сен 2013, 17:14 Сообщение

MarishkaM » 1 минуту назад писал(а):И то, что было в теме стиля не убирать?

Ничего не убирать, всё оставляем на своих местах, за исключением того, что было в футере.
Этот скрипт:

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

<script src="путь до файла/jquery.magnific-popup.js"></script>

Поставьте после приведённого вами:

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

<link rel="stylesheet" href="http://povodok.greatforum.ru/storage/povodok_greatforum_ru/images/magnific-popup.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


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



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

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

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