Magnific Popup - это бесплатный адаптивный jQuery lightbox-плагин, в котором основной упор сделан на производительность и предоставление наилучшего отображения всплывающего окна в независимости от того с какого устройства пользователь открыл страницу.
Обновляйте содержимое внутри лайтбокса, не беспокоясь о том, как оно будет изменять размеры и расположение окна.
Плагин имеет возможность автоматически переключаться на альтернативное отображение на мобильных устройствах при небольшом размере экрана. По умолчанию, элементы управления реализованы на чистом CSS, без внешней графики. Для переходов изображений используется CSS3 вместо медленной анимации JavaScript. Переходы можно настраивать при помощи CSS3 так как вам нравится. Плагин позволяет загружать в lightbox-окно видео, карты, формы и контент из других источников при помощи AJAX.
Подключение плагина.
В архиве находятся всего два файла: стили и файл скрипта. Закачиваете файлы на форум. В шаблоне
Если у вас уже подключена библиотека jQuery, но меньшей версии, то замените старую на эту. Если у вас уже подключена эта версия, то библиотеку ставить не нужно.
В шаблоне
Открытие вложений с помощью Magnific Popup, открываем шаблон
В найденном
Всё, все вложения будут открываться в лайтбоксах.
Во время загрузки большого изображения посередине экрана будет надпись Loading..., которую можно заменить на своё изображение, для этого в настройках скрипта:
замените
Например - такое изображение.
Имя изображения, которое отображается сразу под фотографией в развёрнутом виде, формируется из
Под именем изображения есть ещё одно поле, которое можно настроить через скрипт:
вы можете указать адрес вашего форума, а можно вывести данные фотографии, её вес и количество скачиваний(просмотров), для этого открываете
меняете на:
В настройках скрипта находите:
меняете на:
Открытие изображение в лайтбоксе вложенных с помощью bbcode.
Создаём ббкод:
Замена HTML:
Либо:
Замена HTML:
В этом варианте вместо уменьшенного изображения можно указать текст или своё уменьшенное изображение.
Открытие роликов из youtube.com, vimeo.com или гугл карт в лайтбоксе.
Создаём ббкод:
Замена HTML:
Открываем шаблон
Ставим:
В тему стиля добавляете:
Поддержка браузеров.
Плагин протестирован на десктопных версиях следующих браузеров: Chrome, Safari, FF, Opera, IE8+, частично поддерживает IE7 (работает, но некоторые визуальные возможности, такие как вертикальное центрирование, отсутствуют). Мобильные браузеры: поддерживаются дефолтные браузеры в Android 2.3+, iOS5+, Blackberry 10+, WP7+, mobile Opera и Chrome в Android.
Последнюю и актуальную версию можно скачать у автора проекта github
Обновляйте содержимое внутри лайтбокса, не беспокоясь о том, как оно будет изменять размеры и расположение окна.
Плагин имеет возможность автоматически переключаться на альтернативное отображение на мобильных устройствах при небольшом размере экрана. По умолчанию, элементы управления реализованы на чистом CSS, без внешней графики. Для переходов изображений используется CSS3 вместо медленной анимации JavaScript. Переходы можно настраивать при помощи CSS3 так как вам нравится. Плагин позволяет загружать в lightbox-окно видео, карты, формы и контент из других источников при помощи AJAX.
Подключение плагина.
В архиве находятся всего два файла: стили и файл скрипта. Закачиваете файлы на форум. В шаблоне
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>
В шаблоне
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>';
Открытие изображение в лайтбоксе вложенных с помощью bbcode.
Создаём ббкод:
Код: Выделить всё
[image]{URL}[/image]
Код: Выделить всё
<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]
Код: Выделить всё
<span class="popup-gallery"><a href="{URL}" title="{URL}">{TEXT}</a></span>
Открытие роликов из youtube.com, vimeo.com или гугл карт в лайтбоксе.
Создаём ббкод:
Код: Выделить всё
[yt]{TEXT}[/yt]
Код: Выделить всё
<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
- Сообщения: 24
- Зарегистрирован: 25 июл 2012, 07:15
- Пол: Жен
Если я ставлю в viewtopic_body.html $('#p{postrow.POST_ID} .popup-gallery').magnificPopup({, то получается то, что на скриншоте.
Видно не доросла я еще до таких модификаций, а жаль. Спасибо, что пытались мне помочь. Знаний у меня не хватает. Стоящая вещь!
+
Подождите, ничего не понял, что вы туда вставляете? Я видимо не правильно изъясняюсь.
Отменяем то, что вы делали ранее. У вас уже всё закачено на форум, поэтому открываете шаблон
Пути до файлов меняете на свои.
Открываете шаблон
Перед найденным вставляете:
Изменения в шаблоне
Для просмотра видео и карт с гугла, добавляете код согласно инструкции из первого сообщения, только в вашем случае скрипт находится не в
Не надо отчаиваться. Давайте попробуем заново:)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
.Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
- MarishkaM
- Сообщения: 24
- Зарегистрирован: 25 июл 2012, 07:15
- Пол: Жен
Ничего не получается. Несколько часов я уже пытаюсь установить, но не выходит. Делаю все так, как Вы говорите.
Но ведь в самом начале работало.
Сейчас посмотрел ваш форум через консоль. Консоль говорит что скрипты установлены в
Ну если совсем ничего не получается, создайте временный тестовый аккаунт с админ. правами, дайте мне логин и пароль в лс, я всё вам сам сделаю, после чего спокойно этот аккаунт удалите. Это если совсем ничего не получается.
Сейчас посмотрел ваш форум через консоль. Консоль говорит что скрипты установлены в
overall_footer.html
, как в первом варианте, а не в viewtopic_body.html
, как я описывал вам позднее. Выполните изменения как я описал в предыдущем сообщении и всё будет работать.Ну если совсем ничего не получается, создайте временный тестовый аккаунт с админ. правами, дайте мне логин и пароль в лс, я всё вам сам сделаю, после чего спокойно этот аккаунт удалите. Это если совсем ничего не получается.
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
- MarishkaM
- Сообщения: 24
- Зарегистрирован: 25 июл 2012, 07:15
- Пол: Жен
Да, я переустанавливала, как в первом варианте, так работает. Только фото отображаются некорректно.CabinetAdmin » 40 минут назад писал(а):Сейчас посмотрел ваш форум через консоль. Консоль говорит что скрипты установлены в overall_footer.html, как в первом варианте
В этом случае фото открывалось на черном фоне.CabinetAdmin » 40 минут назад писал(а):а не в viewtopic_body.html, как я описывал вам позднее
Сейчас еще раз попробую переустановить. Вчера у меня уже все поплыло перед глазами.
- MarishkaM
- Сообщения: 24
- Зарегистрирован: 25 июл 2012, 07:15
- Пол: Жен
viewtopic_body.html
Я правильно установила код? Туда, куда надо? Просто при таком раскладе, не работает ничего.
Фото открывается вот так:
+
Фото открывается вот так:
+
Всё правильно.
Ну, оно и должно открываться так. Если фотография одна в сообщении, то откроется только оно, если фотографий несколько, то появятся стрелки. Вы разве не этого хотели?MarishkaM » 16 минут назад писал(а):Фото открывается вот так:
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
- MarishkaM
- Сообщения: 24
- Зарегистрирован: 25 июл 2012, 07:15
- Пол: Жен
Нет, там нету ни стрелок, ничего, как бы новое окно, чтобы вернуться на форум нужно нажимать кнопку, возле адресной строки.CabinetAdmin » менее минуты назад писал(а):Ну, оно и должно открываться так.
Вот так, как оно сейчас открывается в этом сообщении http://cabinetadmina.ru/viewtopic.php?f ... 279#p64278
Но я уже разобралась. В viewtopic_body.html есть 2 таких кода:
Код: Выделить всё
</div>
<hr class="divider" />
Сейчас скрипт переставила и все заработало как надо.
Надеюсь, что это последний вопрос , что за надпись возле фото (везде одинаковая) undefined.
+
Это означает, что скрипт не может определить имя изображения. Имя изображения задаётся в title, в тегеMarishkaM » 2 минуты назад писал(а):undefined
<a>
. Если ваше изображение, это вложение, то нужно сделать правку в шаблоне attachment.html
, если ббкодом, то в теге <a>
должен быть title="{URL}"
. В первом сообщении об этом упоминается.Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
- MarishkaM
- Сообщения: 24
- Зарегистрирован: 25 июл 2012, 07:15
- Пол: Жен
Нашла свою ошибку (в скрипте). Я что-то недоглядела.
CabinetAdmin, спасибо Вам огромное, столько времени потратили.
На данный момент все работает (ттт). ))
CabinetAdmin, спасибо Вам огромное, столько времени потратили.
На данный момент все работает (ттт). ))
- tomos2007
- Сообщения: 3
- Зарегистрирован: 08 ноя 2013, 21:48
- Пол: Муж
Огромное Человеческое Спасибо за плагин!!! Долго искал и нашел у вас. Установил второй вариант - когда изображения просматриваются только в одном сообщении, но почему-то не работает вот это:
код который мы вставляем в скрипт в файл viewtopic_body.html. Изображение всплывет, но показывает под ним только название изображения. Форум установлен в подпапке типа site.ru/forum. Может быть это причиной?
Код: Выделить всё
<small><!-- BEGIN _file --><!-- IF _file.S_THUMBNAIL -->Вес: {_file.FILESIZE} {_file.SIZE_LANG} {_file.L_DOWNLOAD_COUNT}<!-- ELSE -->{U_INDEX}<!-- ENDIF --><!-- END _file --></small>
- tomos2007
- Сообщения: 3
- Зарегистрирован: 08 ноя 2013, 21:48
- Пол: Муж
Я еще добавил впереди ссылку на сайт, так вот она выводится, а Ни числа просмотров ни веса нет.
В чем может быть причина? Шаблон Prosilver на установленном форуме. Проверял на чистом phpbb 3.0.12 - все показывает
Код: Выделить всё
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>';
}
Да, тот вариант не работает. Вернее он работает, но немного не так как нужно. Сделаем по другому. Потом внесу эти правки в первое сообщение.
Открываете
меняете на:
В настройках скрипта находите:
меняете на:
В этом варианте должно работать без нареканий.
Открываете
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>';
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
- X-DP
- Сообщения: 1
- Зарегистрирован: 13 ноя 2013, 23:43
- Пол: Муж
Приветствую! Помогите прикрутить форму реализованную на плагине 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>