Украшательства на сайте : делаем надпись поверх картинки

Долгая, вообще, история с картинками. Хорошо, если есть шаблон, где предусмотрены позиции картинок, может быть какой то слайдер или галерея. А все картинки причесаны под один формат. «Проблемными» являются изображения внутри статьи. Во-первых, их нужно особо подготавливать к публикации — обрезать, подогнать к размерам, а во-вторых, часто их нужно подписать.

Вот это «во-вторых» мы красиво и сделаем. Задача такая — в alt или title картинки в wysiwyg редакторе CMS делается описание картинки, далее, при выводе этой картинки в шаблоне статьи, будем делать подстановку в html коде такую, чтобы получить заданное описание поверх картинки. Ну как то так, к примеру :han-shatyr

Можно подстановку делать и на стороне сервера, я же предлагаю вариант с использованием jQuery, добиваясь точно такого же эффекта как это сделано в примере выше.

Что нам понадобится

  • Добавить обработчик после загрузки окна, который будет осуществлять подстановку. Добавим в head шаблона конструкцию вроде — $(window).load( … ) ;
  • Определиться с областью где будет происходить замена. Скорее всего — контейнер вывода публикации, пусть это будет <div id=main> … </div>;
  • Для фона подписи нужна полупрозрачная картинка (надеюсь, не надо рассказывать как сделать ? :) ) или специальные каскадные стили. Я использую вариант с картинкой — так как с картинками браузеры более или менее работают одинаково, а вот со стилями (особенно, что касается прозрачности) — наблюдается какой то бардак;
  • Добавим нужные описания в файл каскадных стилей;
  • Убедиться, что скрипт библиотеки jquery подключен :). К примеру, в Drupal он используется штатно, там заботиться об этом не надо, а в вашем случае поступайте по ситуации. Его, кстати, можно подключить с Google, что якобы потенциально уменьшит нагрузку на ваш веб-сервер. Что то в этом есть.. Мне, правда, не нравится зависеть от работы сторонних серверов, даже если это сервера гугл.

Когда все детали понятны, осталось показать что получилось.

Итоговый вариант

У вас, в любом случае, будет немного свой вариант, зависящий и от конструкции движка, и стиля оформления сайта, но за основу, для эксперимента или как начальный вариант можете использовать кусочки моего кода.

Обработчик, с использованием jquery (размещается внутри тега <head> в шаблоне)

Картинка для полупрозрачного фона — img-alt-mask.png. Ну не делать же вам её самим?

img-alt-mask

Осталось только добавить стили для класса img-alt, который мы присвоили контейнеру, заменяющему картинку.

Мало букафф? Читайте есчо !

Апрель 19, 2015 г.

Монтаж Телеком

Монтаж Телеком занимается строительством объектов связи и сетевой инфраструктуры. Не думаю, что им нужен был сайт для привлечения клиентов, так как ...

Читать
Январь 8, 2016 г.

Поиск выбранного RADIO в HTML форме средствами javascript

Продемонстрирую алгоритм работы с полем radio для универсального случая, когда мы не знаем существует ли поле, одно у него значение в форме или оно может принимать значение из некоторого набора (случай списка из радио-кнопок). На практике, часто ...

Читать

 

Понравилась статья? Есть вопросы? - пишите в комментариях.




Комментарий:

Много комментариев в “Украшательства на сайте : делаем надпись поверх картинки”

  1. Точно, класс забыл в div прописать, спасибо, исправляю…

  2. Andrew:

    Клас то так и не присвоили… минут пять искал в чем проблема…