jQuery Capty - A Caption Plugin - подсказки к изображениям
16.Мая.2024
|Выезжающие подсказки или описания для изображений при наведении курсора мышкой, описание может занимать несколько строк и иметь активную ссылку, так же можно настроить размер и вид появления подсказки. Текст для подсказки берётся из атрибута alt у тега img, так-же можно забирать текст для подсказки из скрытогот div или вписать в скрипте.
Подключение:
Подключаем библиотеку jquery и скрипт плагина.
Далее вписываем стили.
Теперь вписываем подходящий вариант картинки со скриптом
1. Подсказка плавно выезжает снизу, подсказка берется из атрибута alt.
2. Плавное появление, подсказка берется из атрибута alt.
3. Фиксированная подсказка берется из атрибута alt.
4. Выезжающая подсказка со ссылкой берется из div блока У изображения задается атрибут name со значением равным id div-а с подсказкой.
5. В данном примере одна подсказка выводится для 3 различных изображений с обшим классом "fix" тект подсказки задаётся в скрипте инициализации.
Настройки:
animation: 'slide' - Задает вид анимации возможные значения (slide, fade, fixed).
cCaption: 'capty-caption' - Css класс для div (обёртка подсказки в коде после обработки плагином).
cImage: 'capty-image' - Css класс для div (обёртка изображения в коде после обработки плагином).
cWrapper: 'capty-wrapper' - Css класс для div (обёртка изоб-я и под-ки в коде после обработки плагином).
height: 30 - Высота подскакзки.
opacity: 0.7 - Прозрачность подскакзки.
prefix: 'тут текст' - Текст1 подсказки (если берется из скрипта).
sufix: 'тут текст' - Текст2 подсказки (если берется из скрипта).
speed: 200 - Скорость появления подсказки.
Во всех кроме последнего примера для определения изображения для подсветки используется id (уникальный идентефикатор может использоватся 1 раз на странице) поэтому если вам необходимо отобразить подсказку для 2х и более изображений, необходимо использовать class вместо id как в последнем 5ом примере.
Источник материала: www.wbotelhos.comОписание на других сайтах: www.center-dm.ru