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

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

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

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

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

Улучшаем реакцию меню

Апрель 28, 2016 г.

Pull-down - выпадающим меню, работающим на javascript, никого не удивить. Мне не нравится, что оно закрывается мгновенно, как курсор мыши выходит за край выпавшей секции. Немного промахнешься (особенно это часто случается с последними пунктами), и меню ...

Читать

Сателлиты СУЕТ-холдинга

Август 10, 2010 г.

Для СУЕТ-холдинга закончена верстка и собраны сразу целых 4 сайта-сателлита, которые посвящены разным направлениям деятельности компании. Сайты базируются на одном и том же шаблоне и наборе модулей. suet-ups.ru | Источники бесперебойного питания ...

Читать

 

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

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



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

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

  1. Andrew:

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

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