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

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

Если я ставлю в viewtopic_body.html $('#p{postrow.POST_ID} .popup-gallery').magnificPopup({, то получается то, что на скриншоте. :scratch:
+
Видно не доросла я еще до таких модификаций, а жаль. :( Спасибо, что пытались мне помочь. :Rose: Знаний у меня не хватает. :pardon: Стоящая вещь! :)
  • 0

CabinetAdmin 22 сен 2013, 18:54 Сообщение

Подождите, ничего не понял, что вы туда вставляете? Я видимо не правильно изъясняюсь.
MarishkaM » Сегодня, 20:21 писал(а):Спасибо, что пытались мне помочь.
Не надо отчаиваться. Давайте попробуем заново:)

Отменяем то, что вы делали ранее. У вас уже всё закачено на форум, поэтому открываете шаблон 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>
<script src="путь до файла/jquery.magnific-popup.js"></script>
Пути до файлов меняете на свои.

Открываете шаблон viewtopic_body.html, находите:

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

   </div>

   <hr class="divider" />
<!-- END postrow -->
Перед найденным вставляете:

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

<script type="text/javascript">
   $(document).ready(function() {
      $('#p{postrow.POST_ID} .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>
Изменения в шаблоне attachment.html описаны в первом сообщении.
Для просмотра видео и карт с гугла, добавляете код согласно инструкции из первого сообщения, только в вашем случае скрипт находится не в overall_footer.html, а в viewtopic_body.html.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

Ничего не получается. Несколько часов я уже пытаюсь установить, но не выходит. :%) Делаю все так, как Вы говорите. :unknown
  • 0

CabinetAdmin 23 сен 2013, 14:06 Сообщение

Но ведь в самом начале работало.

Сейчас посмотрел ваш форум через консоль. Консоль говорит что скрипты установлены в overall_footer.html, как в первом варианте, а не в viewtopic_body.html, как я описывал вам позднее. Выполните изменения как я описал в предыдущем сообщении и всё будет работать.


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

MarishkaM 23 сен 2013, 14:49 Сообщение

CabinetAdmin » 40 минут назад писал(а):Сейчас посмотрел ваш форум через консоль. Консоль говорит что скрипты установлены в overall_footer.html, как в первом варианте
Да, я переустанавливала, как в первом варианте, так работает. Только фото отображаются некорректно.
CabinetAdmin » 40 минут назад писал(а):а не в viewtopic_body.html, как я описывал вам позднее
В этом случае фото открывалось на черном фоне. :oops:
Сейчас еще раз попробую переустановить. Вчера у меня уже все поплыло перед глазами. :%) :milo:
  • 0

MarishkaM 23 сен 2013, 15:07 Сообщение

viewtopic_body.html
+
Я правильно установила код? Туда, куда надо? Просто при таком раскладе, не работает ничего. :(

Фото открывается вот так:
+
  • 0

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

Всё правильно.
MarishkaM » 16 минут назад писал(а):Фото открывается вот так:
Ну, оно и должно открываться так. Если фотография одна в сообщении, то откроется только оно, если фотографий несколько, то появятся стрелки. Вы разве не этого хотели? :scratch:
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

MarishkaM 23 сен 2013, 15:38 Сообщение

CabinetAdmin » менее минуты назад писал(а):Ну, оно и должно открываться так.
Нет, там нету ни стрелок, ничего, как бы новое окно, чтобы вернуться на форум нужно нажимать кнопку, возле адресной строки.
Вот так, как оно сейчас открывается в этом сообщении http://cabinetadmina.ru/viewtopic.php?f ... 279#p64278

Но я уже разобралась. В viewtopic_body.html есть 2 таких кода:

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

</div>
   <hr class="divider" />

Сейчас скрипт переставила и все заработало как надо. :)
Надеюсь, что это последний вопрос :oops: , что за надпись возле фото (везде одинаковая) undefined.
+
Кстати, видите, фон на фото прозрачный, а до этого просто черный был и без ничего.
  • 0

CabinetAdmin 23 сен 2013, 15:48 Сообщение

Это означает, что скрипт не может определить имя изображения. Имя изображения задаётся в title, в теге <a>. Если ваше изображение, это вложение, то нужно сделать правку в шаблоне attachment.html, если ббкодом, то в теге <a> должен быть title="{URL}". В первом сообщении об этом упоминается.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

MarishkaM 23 сен 2013, 16:27 Сообщение

Нашла свою ошибку (в скрипте). :scratch: Я что-то недоглядела. :unknown
CabinetAdmin, спасибо Вам огромное, столько времени потратили. :Rose:
На данный момент все работает (ттт). ))
  • 0

tomos2007 09 ноя 2013, 19:59 Сообщение

Огромное Человеческое Спасибо за плагин!!! Долго искал и нашел у вас. Установил второй вариант - когда изображения просматриваются только в одном сообщении, но почему-то не работает вот это:

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

<small><!-- BEGIN _file --><!-- IF _file.S_THUMBNAIL -->Вес: {_file.FILESIZE} {_file.SIZE_LANG} {_file.L_DOWNLOAD_COUNT}<!-- ELSE -->{U_INDEX}<!-- ENDIF --><!-- END _file --></small>
код который мы вставляем в скрипт в файл viewtopic_body.html. Изображение всплывет, но показывает под ним только название изображения. Форум установлен в подпапке типа site.ru/forum. Может быть это причиной?
  • 0

CabinetAdmin 09 ноя 2013, 21:03 Сообщение

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

tomos2007 09 ноя 2013, 22:20 Сообщение

Я еще добавил впереди ссылку на сайт, так вот она выводится, а Ни числа просмотров ни веса нет.

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

return item.el.attr('title') + '<small><a href="http://site.ru/forum"> Форум "Нашего Сайта"</a></br><!-- BEGIN _file --><!-- IF _file.S_THUMBNAIL -->Вес: {_file.FILESIZE} {_file.SIZE_LANG} {_file.L_DOWNLOAD_COUNT}<!-- ELSE -->{U_INDEX}<!-- ENDIF --><!-- END _file --></small>';
            }
В чем может быть причина? Шаблон Prosilver на установленном форуме. Проверял на чистом phpbb 3.0.12 - все показывает
  • 0

CabinetAdmin 10 ноя 2013, 08:37 Сообщение

Да, тот вариант не работает. Вернее он работает, но немного не так как нужно. Сделаем по другому. Потом внесу эти правки в первое сообщение.

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

X-DP 13 ноя 2013, 23:51 Сообщение

Приветствую! Помогите прикрутить форму реализованную на плагине Magnific Popup (http://dimsemenov.com/plugins/magnific-popup/) из соответствующего примера (Popup with form) приведенного на странице плагина:

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

$(document).ready(function() {
	$('.popup-with-form').magnificPopup({
		type: 'inline',
		preloader: false,
		focus: '#name',

		// When elemened is focused, some mobile browsers in some cases zoom in
		// It looks not nice, so we disable it:
		callbacks: {
			beforeOpen: function() {
				if($(window).width() < 700) {
					this.st.focus = false;
				} else {
					this.st.focus = '#name';
				}
			}
		}
	});
});

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

<!-- link that opens popup -->
<a class="popup-with-form" href="#test-form">Open form</a>

<!-- form itself -->
<form id="test-form" class="white-popup-block mfp-hide">
	<h1>Form</h1>
	<fieldset style="border:0;">
		<p>Lightbox has an option to automatically focus on the first input. It's strongly recommended to use <code>inline</code> popup type for lightboxes with form instead of <code>ajax</code> (to keep entered data if the user accidentally refreshed the page).</p>
		<ol>
			<li>
				<label for="name">Name</label>
				<input id="name" name="name" placeholder="Name" required="" type="text">
			</li>
			<li>
				<label for="email">Email</label>
				<input id="email" name="email" placeholder="example@domain.com" required="" type="email">
			</li>
			<li>
				<label for="phone">Phone</label>
				<input id="phone" name="phone" placeholder="Eg. +447500000000" required="" type="tel">
			</li>
			<li>
				<label for="textarea">Textarea</label><br>
				<textarea id="textarea">Try to resize me to see how popup CSS-based resizing works.</textarea>
			</li>
		</ol>
	</fieldset>
</form>
уже что только не пробовал, ничего не появляется(((
  • 0