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
В ютубе было много разного пособия, есть книги в бумажном варианте и их электронные аналоги, что-то можно почерпнуть здесь http://php.net/manual/ru/. В общем то курсов множество, только не тратьтесь на Попова, с его своеобразными курсами.
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
- katakunchik
- Сообщения: 3
- Зарегистрирован: 11 июл 2016, 22:50
- Пол: Муж
Добрый день, повезло что нашел тему об этом плагине. У меня получилось прикрутить плагин , но не возникла проблемка. На больших экранах все работает отлично, но на маленьких не открывается на всю ширину. В чем может быть проблема или где нужно подправить код??
- katakunchik
- Сообщения: 3
- Зарегистрирован: 11 июл 2016, 22:50
- Пол: Муж
Скорее всего так оно и есть. Я вынес блок с описанием title в сторону от картинки и в связи с этим, как я понимаю, плагин не может верно рассчитать необходимую ширину, но я не знаю как эту проблему решить.
.mfp-bottom-bar {
cursor: auto;
position: absolute;
right: -160%;
top: 70px;
width: 150%;
font-weight: 300;
}
.mfp-bottom-bar {
cursor: auto;
position: absolute;
right: -160%;
top: 70px;
width: 150%;
font-weight: 300;
}
Ну если только изменить расположение блока при небольшой ширине:
Код: Выделить всё
@media only screen and (max-width: 980px) {
...
}
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
- katakunchik
- Сообщения: 3
- Зарегистрирован: 11 июл 2016, 22:50
- Пол: Муж
спасибо за помощь, нашел решение своей проблемы чуть иным способом.