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

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

Вот это «во-вторых» мы красиво и сделаем. Задача такая — в 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, который мы присвоили контейнеру, заменяющему картинку.

Написать комментарий

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

Строительная экспертиза

Октябрь 8, 2010 г.

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

Читать

Способы прижать HTML элемент к нижнему краю экрана

Сентябрь 14, 2015 г.

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

Читать

 

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

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



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

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

  1. Andrew:

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

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