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 25 июн 2016, 08:20 Сообщение

В ютубе было много разного пособия, есть книги в бумажном варианте и их электронные аналоги, что-то можно почерпнуть здесь http://php.net/manual/ru/. В общем то курсов множество, только не тратьтесь на Попова, с его своеобразными курсами.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

katakunchik 11 июл 2016, 22:56 Сообщение

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

CabinetAdmin 12 июл 2016, 15:25 Сообщение

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

katakunchik 13 июл 2016, 00:46 Сообщение

Скорее всего так оно и есть. Я вынес блок с описанием title в сторону от картинки и в связи с этим, как я понимаю, плагин не может верно рассчитать необходимую ширину, но я не знаю как эту проблему решить.
.mfp-bottom-bar {
cursor: auto;
position: absolute;
right: -160%;
top: 70px;
width: 150%;
font-weight: 300;
}
  • 0

CabinetAdmin 13 июл 2016, 15:05 Сообщение

Ну если только изменить расположение блока при небольшой ширине:

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

@media only screen and (max-width: 980px) {
	...
}
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

katakunchik 13 июл 2016, 23:19 Сообщение

спасибо за помощь, нашел решение своей проблемы чуть иным способом.
  • 0