Delectabile tempus!
Я всегда хотел в своём блоге тултипы к ссылкам, ведущим на внутренние страницы и посты, как в Википедии:
На мой взгляд, очень прикольный элемент интерфейса. Но никак не мог найти плагин, который бы делал именно то, что мне нужно.
Сказано — сделано. Вооружившись Гроком, Яндексом и ДипСиком, я приступил к делу. Сгенерировать базовую логику оказалось несложно, но я потратил адское количество времени и токенов на то, чтобы заставить тултип отображаться прямо над ссылкой, когда ссылка не у верхней кромки экрана.
Как оказалось, всему виной картинка. Тултип грузится правильно, потом отрисовывается картинка и он «прыгает» вниз. Я дал команду сразу отрисовывать прямоугольник с заглушкой вместе с полем текста и только потом грузить изображение. Дело сдвинулось с мёртвой точки.
Дальше оставалось только навесить логику, чтобы плагин проверял, есть ли у поста вообще, картинка и в случае, если нет, отображал всё корректно. Ну и убрать отображение у разных служебных ссылок, вроде главного меню и проч. Убрать отображение на мобилках, там это лишнее.
Сделал в админке галку включения-выключения.
Вот пример живой ссылки с тултипом.
Должно выглядеть это так:
Забрать плагин вы можете из репо по этой ссылке. Пояснительная записка лежит тут.
История изменений
- Поддержка тултипов для прямых ссылок на изображения с превью
- AJAX обработчик megalinks_get_image_info для получения информации об изображении
- JavaScript функции showImageTooltip() и displayImageTooltip() для обработки ссылок на изображения
- Определение типов изображений: jpg, jpeg, png, gif, webp, bmp, svg
- Отображение размеров изображения, типа файла и размера файла в тултипе
- CSS стили для тултипа изображений с информацией и превью
- Кеширование информации об изображениях для улучшения производительности
- Поддержка внешних изображений с временной загрузкой
- Расширенная фильтрация ссылок с поддержкой изображений
- Обновленная документация с описанием новой функциональности
- Исправлена синтаксическая ошибка в JavaScript коде
- Улучшена обработка ошибок при загрузке изображений
- Оптимизировано позиционирование тултипа для изображений
- Всплывающие подсказки с цитатами для внутренних ссылок на посты и страницы
- AJAX получение цитат постов в реальном времени
- Поддержка получения миниатюр постов для визуальных подсказок
- Определение ID поста по URL с обработкой различных форматов ссылок
- Настройки включения/отключения плагина в админ-панели
- Выбор языка интерфейса с поддержкой русского и английского
- Динамическая загрузка ресурсов только на фронтенде
- Множественные AJAX обработчики с отдельными nonce для безопасности
- Модульная архитектура с централизованным управлением настройками
- Кэширование текстового домена с принудительной перезагрузкой переводов
- Адаптивный CSS дизайн для подсказок
- Полная локализация всех строк интерфейса
