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

Плагин имеет возможность автоматически переключаться на альтернативное отображение на мобильных устройствах при небольшом размере экрана. По умолчанию, элементы управления реализованы на чистом CSS, без внешней графики. Для переходов изображений используется CSS3 вместо медленной анимации JavaScript. Переходы можно настраивать при помощи CSS3 так как вам нравится. Плагин позволяет загружать в lightbox-окно видео, карты, формы и контент из других источников при помощи AJAX.
magnific-popup.rar
15.18 КБ 2048 скачиваний
Подключение плагина.
В архиве находятся всего два файла: стили и файл скрипта. Закачиваете файлы на форум. В шаблоне 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 раз.
Причина: Внесены изменения для вывода данных изображения (вес, просмотр)
Комментарии: 50

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

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

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

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

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

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

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>
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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

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

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

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

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

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

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

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

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

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

Надо пробовать... хм... :scratch:
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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

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

<script>
$('.popup-yamaps').magnificPopup({
	type: 'iframe',

	iframe: {
		patterns: {
			yamaps: {

				index: '//yandex.ru/maps/',
				src: '%id%'

			}
		}
	}
});
</script>
Это для использования ссылки из адресной строки. Но во фрейме не хочет запускаться... :scratch:
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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

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>
Так же можно добавить элементы управления.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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

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

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

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

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

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