Наверх

Небольшой скрипт, улучшающий отображение картинок в статьях

Так как сайты заполняют в основном контент-менеджеры, которые о CSS знают лишь понаслышке, я давно заметил, что контент страниц выглядит некрасиво. Дело в том, что картинки имеют неправильные отступы (обычно ставят выравнивание и отступы по обоим сторонам от картинки). Получается что-то типа такого:



Я решил просто с помощью JQuery исправлять отступы, ну и дополнительно декорировать изображение рамкой. Вот этот небольшой скрипт:
$("#content img").each(function () {
  var marginLable = "margin-" + $(this).css("float");
  var imgStyle = {
    "margin-top":"5px",
    "display":"block",
    "background":"#fff",
    "padding":"5px","border":"1px solid #d0dae3"
  };
  imgStyle[marginLable] = 0;
  $(this).css(imgStyle);
});

Действует на все картинки внутри контейнера с id=«content»

6 комментариев

  1. Anton HighExcel 27 сентября 2013, 07:34(Комментарий был изменён) # 0
    зачем сий велосипед?

    почему не прописать свойства в css?
    1. Илья Уткин 27 сентября 2013, 09:57(Комментарий был изменён) # 0
      Если в этом диалоге прописать горизонтальный отступ:

      то маргины проставляются и слева, и справа. Основная цель скрипта убрать лишний отступ, чтобы прижать картинку к краю страницы. Украшательства, типа бордера, второстепенны и опциональны.
    2. Георгий Пушкин 19 ноября 2013, 14:57(Комментарий был изменён) # 0
      Добрый день, Илья!
      Спасибо за полезные материалы.
      В Tiny есть кнопочки — выравнивание по левому и правому краю. При этом он присваивает класс соответственно «justifyleft» и «justifyright». Для этих классов пишем нужные стили. И менеджерам удобно управлять одной кнопкой и красота на сайте.
      1. Илья Уткин 19 ноября 2013, 15:02(Комментарий был изменён) # 0
        Тоже верно. Недавно для себя открыл новый редактор для менеджеров — Redactor. Так вот у него в настройках есть опции, в которые можно даже прописать правильные маргины при выравнивании картинок. А этим скриптом все еще пользуюсь, потому что не всегда в дизайне или в верстке прописано оформление картинок.
        1. Alex 30 мая 2014, 05:13 # 0
          У меня так и не удалось подружить redactor с AjaxManager.
          Что-то можно сделать, чтобы этот редактор работал с AjaxManager?
          1. Илья Уткин 30 мая 2014, 09:16 # 0
            Вот это, к сожалению, не знаю. Сам не пользуюсь AjaxManager'ом…

      Авторизация

      через сервис Loginza:

      Подписка или RSS

      Буду присылать новые статьи — никакого спама



      Шаблоны MODX

      1 2 Дальше »

      Объектная
      модель
      MODX