Magnific Popup - новый Lightbox-плагин

Список разделов phpBBex 1.x (поддерживается) Мастерская 1.x

Описание: Только готовые решения! Статьи, заметки, моды и другие полезности для phpBBex 1.x и phpBB 3.0.x.
Модератор: Поддержка

Сообщение #1 factotum » 17.05.2013, 12:02

Вариант Lightbox-плагина от Дмитрия Семенова.
Собственно пруф: http://dimsemenov.com/plugins/magnific-popup/
Анонс на smashingmagazine.com: http://coding.smashingmagazine.com/2013/05/02/truly-responsive-lightbox/

Краткие плюсы:
+ поддержка современных фишек
+ корректное определение вьюпорта для мобильных устройств
+ гибкость настройки, в том числе и структуры html
+ возможность собрать нужный функционал в пару кликов

с любопытством намерен следить за дальнейшим развитием проекта, желая новых успехов и высот талантливому программисту из Киева.

Адаптация для phpBBex:
+ подхватывает все ссылки на изображения, в том числе вложения:
Код: Выделить всё
[url=./image.jpg]./image.jpg][/url]

[url=./image.jpg]./image.jpg][img]./image.jpg[/img][/url]

<a href="./download/file.php?id=1&amp;filename=image.jpg&amp;mode=view" ><img src="./download/file.php?id=1&amp;t=1&amp;filename=image.jpg" alt="image.jpg" title="image.jpg"></a>
+ минимальная правка шаблона
+ для превьшек со ссылкой на исходную картинку добавляет интуитивно понятную иконку зума
+ Лицензия MIT

Репозитарий: https://github.com/vralle/mfp
Загрузить последнюю версию: https://github.com/vralle/mfp/archive/master.zip

Установка:
1. Создать папку "mfp" в корне форума и скопировать в нее содержимое архива
2. Найти файл ./styles/prosilver/template/overall_footer.html
Перед тегом </body> добавить:
Код: Выделить всё
<script id="mfp-loader" data-path="{ROOT_PATH}" type="text/javascript" src="{ROOT_PATH}mfp/loader.min.js"></script>
3. файл content.css
найти:
Код: Выделить всё
.postbody .content img, .postbody .signature img {
поправить блок, чтобы было так:
Код: Выделить всё
.postbody .content img, .postbody .signature img {
   vertical-align: bottom;
   display: inline-block;
   max-width: 400px; /* задаем максимальную ширину картинок */
   height: auto; /* сохраняем пропорции картинки */
}
Поддержка: https://github.com/vralle/mfp/issues
Вложения
screenshot.56.jpg
Последний раз редактировалось factotum 24.10.2015, 21:52, всего редактировалось 39 раз(а).
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 12 лет 5 месяцев

Сообщение #2 BeSS » 18.05.2013, 08:57

И как установить его на форум?
BeSS
Гость

Сообщение #3 factotum » 18.05.2013, 16:08

BeSS, для начала определитесь, для чего Вам нужен magnific-popup?
Встречаются проекты, где важна поддержка мобильных устройств и/или нужна кастомная разметка ноуда. Тут magnific-popup есть чем гордится.

Решений для показа картинок хватает. Мне нравится Colorbox. И весит он поменьше минимального magnific-popup. Если не брать в расчет лицензии, то для phpBBex в актуальной реализации каждый по своему хороши и fancybox, и highslide.
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 12 лет 5 месяцев

Сообщение #4 factotum » 13.07.2013, 19:23

добавлена адаптация для phpBBex
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 12 лет 5 месяцев

Сообщение #5 JoteRuso » 13.07.2013, 22:18

factotum:добавлена адаптация для phpBBex
Только что проверил. Всё работает :smile:
Теперь у меня в галерее Highslide хозяйничает, а во всех остальных местах - Magnific Popup.
Спасибо!
JoteRuso M
Аватара
Откуда: Москва, Россия
Репутация: 541
С нами: 12 лет 5 месяцев

Сообщение #6 factotum » 13.07.2013, 22:46

JoteRuso, в галерее загрузчик не грузиться из-за некорректного определения путей.
/gallery/mfp/loader.min.js - понятно, что ответ 404.

попробуйте так:
Код: Выделить всё
<script type='text/javascript' src='{T_ROOT_PATH}/mfp/loader.min.js'></script>
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 12 лет 5 месяцев

Сообщение #7 JoteRuso » 13.07.2013, 23:02

factotum, так меня всё устраивает =) Использование Highslide в Галерее прописано в Админке, в настройках галереи. Пусть так и остаётся.
Никаких конфликтов чисто внешне, вроде бы, не наблюдается.
Или использование двух скриптов, отвечающих за похожие функции - не рекомендуется?
JoteRuso M
Аватара
Откуда: Москва, Россия
Репутация: 541
С нами: 12 лет 5 месяцев

Сообщение #8 factotum » 13.07.2013, 23:04

подправил пути в загрузчике. кто скачал - обновите файлы.

JoteRuso:Или использование двух скриптов, отвечающих за похожие функции - не рекомендуется?
во первых 404 не бесследно сказывается на производительности апача, и да, конфликт - это лишняя нагрузка на сервер + нагрузка на браузеры клиентов

Добавлено спустя 50 минут 5 секунд:
JoteRuso, глянул узлы highslide - загрузчик их пропускает. можно использовать оба плагина без конфликтов
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 12 лет 5 месяцев

Сообщение #9 JoteRuso » 14.07.2013, 00:48

factotum:можно использовать оба плагина без конфликтов
И это хорошо! :smile:
JoteRuso M
Аватара
Откуда: Москва, Россия
Репутация: 541
С нами: 12 лет 5 месяцев

Сообщение #10 HD321kbps » 16.09.2013, 23:34

factotum, подскажите что лучше для вложений, а что для обычных картинок
HD321kbps M
Аватара
Откуда: Армянск
Репутация: 376
С нами: 11 лет 6 месяцев

Сообщение #11 factotum » 17.09.2013, 12:46

HD321kbps, моя адаптация ловит и то, и другое без каких либо вмешательств в код. Легко интегрируется. Magnific Popup корректно поддерживает вьпорты мобильных устройств.

Чего тут нет - это ресайза внешних картинок и добавлением ссылки. под настроение допишу. пока занят адаптацией своей темы под сенсорные экраны.
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 12 лет 5 месяцев

Сообщение #12 Girl » 17.09.2013, 13:33

а у меня чего-то не работает на phpbbex ...Как было всё ( открыв. картинки на новой странице) так и всё также осталось :spy:
Girl
Аватара
Репутация: 18
С нами: 12 лет

Сообщение #13 factotum » 17.09.2013, 14:47

Girl, ссылку дайте

Добавлено спустя 11 минут 4 секунды:
сайт нашел. картинок нет: https://www.google.com/search?newwindow=1&safe=of ... ite:mooolimp.ru/forum&gs_l=img


дайте ссылку на пост с картинками)
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 12 лет 5 месяцев

Сообщение #14 Girl » 17.09.2013, 15:42

factotum:дайте ссылку на пост с картинками)
а как это вы нашли? :eek: чудеса какие-то :weirdface:
1 пост :
http://moPoolimp.ru/forum/viewtopic.php?f=32&t=142
(большую букву "P" убрать с адреса)
Girl
Аватара
Репутация: 18
С нами: 12 лет

Сообщение #15 factotum » 17.09.2013, 16:18

аха. была ошибка в интеграции.

Добавлено спустя 54 минуты 42 секунды:
обновил шапку.
+ Исправлены вопросы с путями при расположении форума не в корне.
+ Обновлена версия MFP до 0.9.5

Известные баги: вероятный отказ от загрузки вложений в IE
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 12 лет 5 месяцев

Сообщение #16 Girl » 17.09.2013, 21:03

Неа, не работает( .Заменила все файлы на эту версию, строку изменила в overall_footer.html, кэш очистила .
Расположение сайт.ру/forum/mfp/
phpbbex последней версии
Girl
Аватара
Репутация: 18
С нами: 12 лет

Сообщение #17 factotum » 17.09.2013, 22:12

factotum:<script id="mfp-loader" data-path="{T_ROOT_PATH}" type="text/javascript" src="{T_ROOT_PATH}/mfp/loader.min.js"></script>
Girl, у Вас точно так?
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 12 лет 5 месяцев

Сообщение #18 Girl » 17.09.2013, 22:19

factotum:Girl, у Вас точно так?
было не так, помоему был покороче код... но поменяла на вот этот и тоже самое .

в оверах футер код заканчивается
Код: Выделить всё
   <div class="clear"></div>
</div>

<div style="height: 0px; overflow: hidden;">
   <a id="bottom" name="bottom" accesskey="z"></a>
   <!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>
</div>
<script id="mfp-loader" data-path="{T_ROOT_PATH}" type="text/javascript" src="{T_ROOT_PATH}/mfp/loader.min.js"></script>
</body>
</html>

скрин с файлзилы:
phpbbex.jpg
Girl
Аватара
Репутация: 18
С нами: 12 лет

Сообщение #19 factotum » 18.09.2013, 16:10

Girl, можете просто перенести папку mfp в корень ресурса.

Или попробуйте так:
Код: Выделить всё
<script id="mfp-loader" data-path="{ROOT_PATH}" type="text/javascript" src="{ROOT_PATH}/mfp/loader.min.js"></script>

Если не поможет, переключайтесь на ручной привод:
Код: Выделить всё
<script id="mfp-loader" data-path="/forum" type="text/javascript" src="/forum/mfp/loader.min.js"></script>
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 12 лет 5 месяцев

Сообщение #20 HD321kbps » 18.09.2013, 19:37

как-то ставил на локалке не работало, поставил:
Код: Выделить всё
<script id="mfp-loader" data-path="{ROOT_PATH}" type="text/javascript" src="http:/site.ru/mfp/loader.min.js"></script>
Все вроде работало)
HD321kbps M
Аватара
Откуда: Армянск
Репутация: 376
С нами: 11 лет 6 месяцев

След.

Вернуться в Мастерская 1.x