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
- Пол: Жен
Это будет что-то вроде форумской загрузки? Если загрузить фото с другого фотохостинга, то будет работать? ))
- MarishkaM
- Сообщения: 24
- Зарегистрирован: 25 июл 2012, 07:15
- Пол: Жен
Спасибо.
А можно сделать, чтобы фото открывалось более мягко.
А можно сделать, чтобы фото открывалось более мягко.
- MarishkaM
- Сообщения: 24
- Зарегистрирован: 25 июл 2012, 07:15
- Пол: Жен
[hide]Примерно так: http://www.digitalia.be/software/slimbox2#demo[/hide]CabinetAdmin » 13 минут назад писал(а):... А это как?
И еще, у Вас при наведении на фото, появляется значок, у меня нету такого.
Вот этот кусочек мне тоже не совсем понятно, что на что менять.
Возможно ли сделать такую загрузку вместо • Добавить изображение, а то ни всем пользователям будет понятно, что и куда нужно прописывать...Имя изображения, которое отображается сразу под фотографией в развёрнутом виде, формируется из title, именно для этого мы добавили title="{_file.DOWNLOAD_NAME}" для ссылки на полное изображение, вместо имени можно использовать {_file.COMMENT} - будет выводиться комментарий к файлу, {_file.U_DOWNLOAD_LINK} - будет показана ссылка на изображение.
Так нет, к сожалению.MarishkaM » Сегодня, 14:11 писал(а):Примерно так
Значок, это уже моя доработка, добавьте в тему стиля:
Код: Выделить всё
.popup-gallery img { cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; }
В открытом виде, под изображением, есть два поля, в первом содержится имя изображения, которое получается из правки вMarishkaM » Сегодня, 14:11 писал(а):Вот этот кусочек мне тоже не совсем понятно
attachment.html
:
Код: Выделить всё
<a href="{_file.U_DOWNLOAD_LINK}" title="{_file.DOWNLOAD_NAME}">
title
, если содержимое title
заменить, например, на {_file.U_DOWNLOAD_LINK}
, то вместо имени будет выведена ссылка на изображение. Можно поставить что нибудь другое, можно вообще удалить и имени изображения не будет. Это как говорится на вкус и цвет.Во втором, то что содержится между
<small></small
, в настройках скрипта, который находится в overall_footer.html
:
Код: Выделить всё
return item.el.attr('title') + '<small></small>';
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
- MarishkaM
- Сообщения: 24
- Зарегистрирован: 25 июл 2012, 07:15
- Пол: Жен
Еще момент один подскажите.
Если в данный код заключены 30 фотографий на одной странице, то их все приходится смотреть. Можно это изменить, что бы только в одном сообщении (например 5 штук) просматривались только 5 фотографий, а не все 30. ))
Если в данный код заключены 30 фотографий на одной странице, то их все приходится смотреть. Можно это изменить, что бы только в одном сообщении (например 5 штук) просматривались только 5 фотографий, а не все 30. ))
Да, есть такой момент... Надо посмотреть код......
В настройках скрипта есть такая строчка:
изменение true на fasle запретит просмотр всех изображений...
добавлено автором
Решение. Установка будет немного другой, скрипт:
устанавливаем перед
Скрипт:
ставим в шаблоне
В начале скрипта добавляете
В настройках скрипта есть такая строчка:
Код: Выделить всё
enabled: true,
добавлено автором
Решение. Установка будет немного другой, скрипт:
Код: Выделить всё
<script src="путь до файла/jquery.magnific-popup.js"></script>
</head>
в шаблоне overall_header.html
Скрипт:
Код: Выделить всё
<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>
viewtopic_body.html
перед:
Код: Выделить всё
</div>
<hr class="divider" />
<!-- END postrow -->
#p{postrow.POST_ID}
:
Код: Выделить всё
$('#p{postrow.POST_ID} .popup-gallery').magnificPopup({
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
- MarishkaM
- Сообщения: 24
- Зарегистрирован: 25 июл 2012, 07:15
- Пол: Жен
Все, что было установлено раньше - удалять?
Куда этот скрипт ставить? <script src="путь до файла/jquery.magnific-popup.js"></script>
Все, я запуталась.., у меня на форуме не работают ни фото ни видео...
Куда этот скрипт ставить? <script src="путь до файла/jquery.magnific-popup.js"></script>
Все, я запуталась.., у меня на форуме не работают ни фото ни видео...
- MarishkaM
- Сообщения: 24
- Зарегистрирован: 25 июл 2012, 07:15
- Пол: Жен
Удалила в футере, все равно не работает.
Видео работает. Фото тоже (вроде), но снова просматриваются все фотографии. Т.е. нет лимита, например 5 и все.
Видео работает. Фото тоже (вроде), но снова просматриваются все фотографии. Т.е. нет лимита, например 5 и все.
Последний раз редактировалось MarishkaM 22 сен 2013, 17:05, всего редактировалось 3 раза.
- MarishkaM
- Сообщения: 24
- Зарегистрирован: 25 июл 2012, 07:15
- Пол: Жен
Это оставляем в overall_header.html?
И то, что было в теме стиля не убирать?
Вот еще что появилось:
Код: Выделить всё
<link rel="stylesheet" href="http://povodok.greatforum.ru/storage/povodok_greatforum_ru/images/magnific-popup.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Вот еще что появилось:
Ничего не убирать, всё оставляем на своих местах, за исключением того, что было в футере.MarishkaM » 1 минуту назад писал(а):И то, что было в теме стиля не убирать?
Этот скрипт:
Код: Выделить всё
<script src="путь до файла/jquery.magnific-popup.js"></script>
Код: Выделить всё
<link rel="stylesheet" href="http://povodok.greatforum.ru/storage/povodok_greatforum_ru/images/magnific-popup.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
viewtopic_body.html
как я описал выше.Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!