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

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

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

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

Заполнение поля формы через GET в Drupal 7

Июнь 23, 2011 г.

Рассмотрим случай, когда нужно предварительно заполнить поле (ряд полей) формы при переходе на страницу с этой формой в Drupal. Данные для инициализации передаём как часть uri (т.е. метод GET). Подход проверен для Drupal 7. [crayon-689592a4ecaed193920815/]

Читать

Относительные ссылки/пути в Wordpress

Февраль 28, 2017 г.

При добавлении картинки в публикацию, WP формирует html код с абсолютным путем. Т.е. мы получаем полный адрес: протокол, домен, путь на сайте и имя файла. Как сделать, чтобы WP подставлял относительные пути, т.е. опускал протокол и домен? Настраиваем ...

Читать

Обновленный "Родной Источник"

Ноябрь 8, 2010 г.

Закончена реновация сайта r-ist.ru. Теперь этот бренд логически объединяет несколько компаний в один, так назовем его, холдинг. Не знаю уж как это обстоит ...

Читать

Генетический алгоритм - что ты такое?

Декабрь 9, 2016 г.

Генетический алгоритм - это довольно новый инструмент в арсенале решения задач. Использовать метод стало возможным благодаря вычислительной технике. ЭВМ ...

Читать
 

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

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



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

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

  1. Andrew:

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

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