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

Board index phpBBex 1.x Мастерская

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

Post #1by 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:
+ подхватывает все ссылки на изображения, в том числе вложения:
Code: Select all
[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> добавить:
Code: Select all
<script id="mfp-loader" data-path="{ROOT_PATH}" type="text/javascript" src="{ROOT_PATH}mfp/loader.min.js"></script>
3. файл content.css
найти:
Code: Select all
.postbody .content img, .postbody .signature img {
поправить блок, чтобы было так:
Code: Select all
.postbody .content img, .postbody .signature img {
   vertical-align: bottom;
   display: inline-block;
   max-width: 400px; /* задаем максимальную ширину картинок */
   height: auto; /* сохраняем пропорции картинки */
}
Поддержка: https://github.com/vralle/mfp/issues
Attachments
screenshot.56.jpg
Last edited by factotum on 24.10.2015, 21:52, edited 39 times in total.
Если "улучшение" стало "граблями" - Вы его переросли
factotum
Topic author, Гуру
Location: Люксембург
Reputation: 232
With us: 5 years 5 months

Post #2by BeSS » 18.05.2013, 08:57

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

Post #3by factotum » 18.05.2013, 16:08

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

Решений для показа картинок хватает. Мне нравится Colorbox. И весит он поменьше минимального magnific-popup. Если не брать в расчет лицензии, то для phpBBex в актуальной реализации каждый по своему хороши и fancybox, и highslide.
Если "улучшение" стало "граблями" - Вы его переросли
factotum
Topic author, Гуру
Location: Люксембург
Reputation: 232
With us: 5 years 5 months

Post #4by factotum » 13.07.2013, 19:23

добавлена адаптация для phpBBex
Если "улучшение" стало "граблями" - Вы его переросли
factotum
Topic author, Гуру
Location: Люксембург
Reputation: 232
With us: 5 years 5 months

Post #5by JoteRuso » 13.07.2013, 22:18

factotum wrote:добавлена адаптация для phpBBex
Только что проверил. Всё работает :smile:
Теперь у меня в галерее Highslide хозяйничает, а во всех остальных местах - Magnific Popup.
Спасибо!
JoteRuso M
Гуру
Avatar
Location: Москва, Россия
Reputation: 534
With us: 5 years 5 months

Post #6by factotum » 13.07.2013, 22:46

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

попробуйте так:
Code: Select all
<script type='text/javascript' src='{T_ROOT_PATH}/mfp/loader.min.js'></script>
Если "улучшение" стало "граблями" - Вы его переросли
factotum
Topic author, Гуру
Location: Люксембург
Reputation: 232
With us: 5 years 5 months

Post #7by JoteRuso » 13.07.2013, 23:02

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

Post #8by factotum » 13.07.2013, 23:04

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

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

Added after 50 minutes 5 seconds:
JoteRuso, глянул узлы highslide - загрузчик их пропускает. можно использовать оба плагина без конфликтов
Если "улучшение" стало "граблями" - Вы его переросли
factotum
Topic author, Гуру
Location: Люксембург
Reputation: 232
With us: 5 years 5 months

Post #9by JoteRuso » 14.07.2013, 00:48

factotum wrote:можно использовать оба плагина без конфликтов
И это хорошо! :smile:
JoteRuso M
Гуру
Avatar
Location: Москва, Россия
Reputation: 534
With us: 5 years 5 months

Post #10by HD321kbps » 16.09.2013, 23:34

factotum, подскажите что лучше для вложений, а что для обычных картинок
HD321kbps M
Гуру
Avatar
Age: 27
Location: Армянск
Reputation: 350
With us: 4 yaers 6 months

Post #11by factotum » 17.09.2013, 12:46

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

Чего тут нет - это ресайза внешних картинок и добавлением ссылки. под настроение допишу. пока занят адаптацией своей темы под сенсорные экраны.
Если "улучшение" стало "граблями" - Вы его переросли
factotum
Topic author, Гуру
Location: Люксембург
Reputation: 232
With us: 5 years 5 months

Post #12by Girl » 17.09.2013, 13:33

а у меня чего-то не работает на phpbbex ...Как было всё ( открыв. картинки на новой странице) так и всё также осталось :spy:
Girl
Мастер
Avatar
Reputation: 18
With us: 4 yaers 11 months

Post #13by factotum » 17.09.2013, 14:47

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

Added after 11 minutes 4 seconds:
сайт нашел. картинок нет: https://www.google.com/search?newwindow=1&safe=of ... ite:mooolimp.ru/forum&gs_l=img


дайте ссылку на пост с картинками)
Если "улучшение" стало "граблями" - Вы его переросли
factotum
Topic author, Гуру
Location: Люксембург
Reputation: 232
With us: 5 years 5 months

Post #14by Girl » 17.09.2013, 15:42

factotum wrote:дайте ссылку на пост с картинками)
а как это вы нашли? :eek: чудеса какие-то :weirdface:
1 пост :
http://moPoolimp.ru/forum/viewtopic.php?f=32&t=142
(большую букву "P" убрать с адреса)
Girl
Мастер
Avatar
Reputation: 18
With us: 4 yaers 11 months

Post #15by factotum » 17.09.2013, 16:18

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

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

Известные баги: вероятный отказ от загрузки вложений в IE
Если "улучшение" стало "граблями" - Вы его переросли
factotum
Topic author, Гуру
Location: Люксембург
Reputation: 232
With us: 5 years 5 months

Post #16by Girl » 17.09.2013, 21:03

Неа, не работает( .Заменила все файлы на эту версию, строку изменила в overall_footer.html, кэш очистила .
Расположение сайт.ру/forum/mfp/
phpbbex последней версии
Girl
Мастер
Avatar
Reputation: 18
With us: 4 yaers 11 months

Post #17by factotum » 17.09.2013, 22:12

factotum wrote:<script id="mfp-loader" data-path="{T_ROOT_PATH}" type="text/javascript" src="{T_ROOT_PATH}/mfp/loader.min.js"></script>
Girl, у Вас точно так?
Если "улучшение" стало "граблями" - Вы его переросли
factotum
Topic author, Гуру
Location: Люксембург
Reputation: 232
With us: 5 years 5 months

Post #18by Girl » 17.09.2013, 22:19

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

в оверах футер код заканчивается
Code: Select all
   <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
Мастер
Avatar
Reputation: 18
With us: 4 yaers 11 months

Post #19by factotum » 18.09.2013, 16:10

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

Или попробуйте так:
Code: Select all
<script id="mfp-loader" data-path="{ROOT_PATH}" type="text/javascript" src="{ROOT_PATH}/mfp/loader.min.js"></script>

Если не поможет, переключайтесь на ручной привод:
Code: Select all
<script id="mfp-loader" data-path="/forum" type="text/javascript" src="/forum/mfp/loader.min.js"></script>
Если "улучшение" стало "граблями" - Вы его переросли
factotum
Topic author, Гуру
Location: Люксембург
Reputation: 232
With us: 5 years 5 months

Post #20by HD321kbps » 18.09.2013, 19:37

как-то ставил на локалке не работало, поставил:
Code: Select all
<script id="mfp-loader" data-path="{ROOT_PATH}" type="text/javascript" src="http:/site.ru/mfp/loader.min.js"></script>
Все вроде работало)
HD321kbps M
Гуру
Avatar
Age: 27
Location: Армянск
Reputation: 350
With us: 4 yaers 6 months

Next

Return to Мастерская



Who is online (over the past 10 minutes)

Users browsing this forum: 1 guest

cron