Как добавить alt в плагине ddslick?
Здравствуйте, как добавить атрибут alt к изображению? Не выводит. В документации нет ничего про это
var ddData = [ { text: "RAL 1014", value: 1, selected: false, imageSrc: "<?=SITE_TEMPLATE_PATH?>/images/ral-color/ral-1014.png", alt: "test" }, . . . $('#colorDropdown').ddslick({ data: ddData, // width: 300, background:'#fff', imagePosition: "left", selectText: "Выбрать цвет", onSelected: function (data) { $('#form-popup-catalog input[name="color-product"]').val(data.selectedData.text); $('.ral-colors').css('display','block'); $('.ral-colors .ral-color-product').html(data.selectedData.text+'<img src="'+data.selectedData.imageSrc+'" alt="'+data.selectedData.alt+'">'); } }); |
var ddData = [ { text: "RAL 1014", value: 1, selected: false, imageSrc: "<?=SITE_TEMPLATE_PATH?>/images/ral-color/ral-1014.png", alt: "test" }, . . . $('#colorDropdown').ddslick({ data: ddData, // width: 300, background:'#fff', imagePosition: "left", selectText: "Выбрать цвет", onSelected: function (data) { $('#form-popup-catalog input[name="color-product"]').val(data.selectedData.text); $('.ral-colors').css('display','block'); $('.ral-colors .ral-color-product').html(data.selectedData.text+'<img src="'+data.selectedData.imageSrc+'" alt="'+data.selectedData.alt+'">'); } });
Дополнительно:
Ответы:
Попробуйте так:
document.addEventListener('DOMContentLoaded', () => { $('#colorDropdown').ddslick({ data: ddData, background: '#fff', imagePosition: "left", selectText: "Выбрать цвет", onSelected: (data) => { const colorInput = $('#form-popup-catalog input[name="color-product"]'); const ralColors = $('.ral-colors'); const ralColorProduct = $('.ral-colors .ral-color-product'); colorInput.val(data?.selectedData?.text); ralColors.css('display', 'block'); const imgHtml = `<img src="${data?.selectedData?.imageSrc}" alt="${data?.selectedData?.alt}">`; ralColorProduct.empty().html(`${data?.selectedData?.text}${imgHtml}`); } }); }); |
document.addEventListener('DOMContentLoaded', () => { $('#colorDropdown').ddslick({ data: ddData, background: '#fff', imagePosition: "left", selectText: "Выбрать цвет", onSelected: (data) => { const colorInput = $('#form-popup-catalog input[name="color-product"]'); const ralColors = $('.ral-colors'); const ralColorProduct = $('.ral-colors .ral-color-product'); colorInput.val(data?.selectedData?.text); ralColors.css('display', 'block'); const imgHtml = `<img src="${data?.selectedData?.imageSrc}" alt="${data?.selectedData?.alt}">`; ralColorProduct.empty().html(`${data?.selectedData?.text}${imgHtml}`); } }); });
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы добавить атрибут alt в плагине ddslick, вам необходимо внести некоторые изменения в исходный код плагина.
1. Откройте файл ddslick.js, который содержит код плагина ddslick.
2. Найдите функцию, которая отвечает за создание выпадающего списка (обычно это функция, начинающаяся с create или init).
3. Внутри этой функции найдите код, который создает элемент![]()
для каждого пункта списка. Обычно это выглядит как $("
").
4. После этой строки добавьте атрибут alt с нужным вам значением. Например, alt: 'My Alt Text'.
Пример кода с добавлением атрибута alt:
// Create image element $("<img src='path/to/image.jpg'>").attr("alt", "My Alt Text").appendTo(li);
5. Сохраните изменения и обновите страницу, чтобы увидеть, как добавленный атрибут alt отображается в вашем выпадающем списке.
Теперь у вас должно быть успешно добавлено значение alt для изображений в плагине ddslick. Не забудьте протестировать изменения, чтобы убедиться, что все работает корректно.