Как добавить title на основе alt у тега img


В свежих версиях движка DLE пропала полезная функция - вывод атритуба title для изображений. Теперь она заменена на атрибут alt.

Но иногда есть потребность выводить описание картинки при наведении на фотку мышкой.
При использовании BBCODES редактора у нас нет такой возможности.

Для понимания сути происходящего обратимся к официальной документации DLE.
Теги при написании новостей


[img=выравнивание|свой текст для alt] ссылка [/img] Вставка картинки новость и выравнивание ее по указанному параметру, а также назначение картинке собственного описания



а так-же

[thumb=выравнивание|свой текст для alt] ссылка [/thumb] Вставка уменьшенной копии картинки новость, с ссылкой на увеличенную картинку и выравнивание ее по указанному параметру, а также назначение картинке собственного описания


Возможности прикрутить атрибут title нет :(

Предлагаемый java script автоматически добавляет атрибут titile на основе атрибута alt для каждого изображения.



Сам скрипт будем применять для полной новости (шаблон fullstory.tpl)


{* Автоматическое добавление атрибута title для картинок в блоке с .full-content на основе атрибута alt *}
<script type="text/javascript">
	jQuery(document).ready(function($) {
	  setTittleToImagesIn(".full-content");
	});

	function setTittleToImagesIn(selector) {
	  var $images = $(selector + " img");

	  $.each($images, function(index) {
	    var $this = $(this);
	    var alt = $this.attr("alt");
	    var hasTitle = $this.attr("title");
	    if (!hasTitle && alt) {
	      var title = "Рисунок " + (index + 1) + ": " + alt;
	      $this.attr("title", title);
	    }
	  });
	}
</script> {* .Автоматическое добавление атрибута title для картинок в блоке с #staticPage на основе атрибута alt *}


Для тега вывода содержимого статьи целиком

{full-story}


добавляем класс .full-content
получается так

<div class="full-content">
	{full-story}
</div>


Теперь если в теле публикации вы заморочились с добавлением описания к каждой картинке у вас автоматически появится атрибут title

Живой пример https://hikm.ru/numismatics.html
сам код картинок в админке

результат на сайте при наведении мышкой на фото



Скрипта написал Павел Pafnuty Белоусов


Уважаемые посетители,
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.



Похожие публикации

[Из песочницы] Font (ещё более) Awesome — узорное изобретение

Привет, Хабр! Представляю вашему вниманию перевод статьи "Font (More) Awesome — an iconic invention" автора Pubudu Dodangoda. Создаёте ли вы веб-сайт, мобильное или настольное приложение, есть... читать далее

Изоляция css стилей с помощью компонентного подхода

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

[Перевод] Работа с Flexbox в гифках

Flexbox так и напрашивается на то, чтобы создавать по нему визуальные шпаргалки. Сегодня мы предлагаем вам перевод статьи Скотта Домеса «Как работает Flexbox – в больших, ярких анимированных гифках»,... читать далее

Как сделать вывод похожих новостей на усмотрения редакции

Вместо автоматической подборки похожих новостей в DLE можно без каких-либо модификаций исходного кода реализовать вывод "рекомендуемых новостей" на усмотрение автора публикации. Весь секрет в... читать далее

Блог им. RatID / Новые правила учета мета тегов поисковой системой Яндекс

В помощи Яндекса вебмастерам описано нововведение. Теперь Яндекс стрго указывает на то, что он использует при ранжировании мета теги «keywords» и «description». Ранее данные теги не считались... читать далее

Надоел спам? Настраиваем captch`y для CMS DLE

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

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте