Как добавить title на основе alt у тега img
В свежих версиях движка DLE пропала полезная функция - вывод атритуба title для изображений. Теперь она заменена на атрибут alt.
Но иногда есть потребность выводить описание картинки при наведении на фотку мышкой.
При использовании BBCODES редактора у нас нет такой возможности.
Для понимания сути происходящего обратимся к официальной документации DLE.
Теги при написании новостей
а так-же
Возможности прикрутить атрибут title нет :(
Предлагаемый java script автоматически добавляет атрибут titile на основе атрибута alt для каждого изображения.
Сам скрипт будем применять для полной новости (шаблон fullstory.tpl)
Для тега вывода содержимого статьи целиком
добавляем класс .full-content
получается так
Теперь если в теле публикации вы заморочились с добавлением описания к каждой картинке у вас автоматически появится атрибут title
Живой пример https://hikm.ru/numismatics.html
сам код картинок в админке
результат на сайте при наведении мышкой на фото
Но иногда есть потребность выводить описание картинки при наведении на фотку мышкой.
При использовании 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 Белоусов
0 Комментарии