Dodawanie klasy do obrazków w jQuery

Witajcie,
Mam taki szablon: http://serwer1356363.home.pl/_nauka/

Na 1 zdjęciu mam dodany opis. Chciałbym w sposób dynamiczny dodawać opisy do kolejnych zdjęć za pomocą jQuery.

Napisałem taki skrypt:

$(window).on('load', function () {
            $('.textowaTrescTresc img').each(function () {
                $(this).addClass('picla');
                $(this).data('label-class', 'label-value');
                console.log($(this));
            })
        })

Jednak z tego co widzę to nie za każdym razem dodaje do obrazka data-label-class="label-class", a w przypadku obrazków w których zostało to dodane nie widać napisu na zdjęciu :(

W jaki sposób można to naprawić?

Na 1 zdjęciu mam dodany opis

A gdzie konkretnie? Bo wszedłem w podany przez Ciebie link i niczego nie widzę. Ani żadnego tekstu na obrazku, ani nic się nie pojawia po najechaniu na niego myszką. Wyjaśnij proszę, o co chodzi z tym opisem.

Zobacz proszę 1 zdjęcie od góry lub ten screen: https://ibb.co/TMXMF3T :)

chcę. dynamicznie dodać takie. etykietki na wszystkie zdjęcie :)

lukmopy napisał(a):

a w przypadku obrazków w których zostało to dodane nie widać napisu na zdjęciu :(

Użyj title zamiast/obok alt.

https://api.jquery.com/data/

Using the data() method to update data does not affect attributes in the DOM. To set a data-* attribute value, use attr

Zamiast

$(this).data('label-class', 'label-value');

Użyj

$(this).attr('data-label-class', 'label-value');

Jeżeli rzeczywiście potrzebujesz ingerować w DOM.

Tak btw to zastanów się, czy to co robisz jest rzeczywiście potrzebne :)

Chyba już kumam. On chce, żeby dla wszystkich obrazków zamienić:

<img src="http://serwer1356363.home.pl/_nauka/1.jpg" style="width: 100%; margin: 0px; padding: 0px;">

na:

<div class="img-responsive" style="display: inline-block; position: relative; width: 1200px; overflow: hidden;">
  <img src="http://serwer1356363.home.pl/_nauka/1.jpg" style="width: 100%; margin: 0px; padding: 0px;">
  <div class="label-class" style="position: absolute; bottom: 0px; width: 100%; box-sizing: border-box;">Description</div>
</div>

let $imgTpl = $('.img-responsive');

$('.textowaTrescTresc img').each(function (el) {
    const $a = $tpl.clone(); 
    $a.find('.label-class').html('Hello');

    $(this).replaceWith($a);
})

Można w ten sposób :)

Nie do końca :) zobaczcie proszę ten screen: https://ibb.co/TMXMF3T

Tj pierwszy obrazek na mojej podstronie. Na obrazku naniesiony jest szary pasek z napisem znajdującym się w alt. Taki efekt chce uzyskać :)

Chodzi o to że mam CMS w którym ludzie wstawiają opisy w powyższym tagi. Chciałbym żeby ten opis był widoczny na zdjęciu (analogicznie jak w przykładzie).

Pomyślałem że można za pomocą JS dodać te data/klasy automatycznie :)

Aktualnie niby dodaje te tagi, jednak napis na zdjęciach innych niż 1 nie jest widoczny :(

Tu nie wystarczy dodanie klas. Trzeba co najmniej stworzyć pseudoelementy.
Mogę coś takiego zrobić w JS, a jak chcesz jQuery, to może ktoś inny.

Coś takiego:

var tab_el_org = document.querySelectorAll(".picla");
for (i=0; i<tab_el_org.length; i++) {
  el_org = tab_el_org[i];
  el_org.style.position = "relative";
  var el = document.createElement("DIV");
  el.className = "label-class"; 
  el.style = "position:absolute; height:40px; margin-top:-40px;";
  el.style.width = el_org.style.width;
  el.innerHTML = el_org.getAttribute("alt");
  el_org.parentNode.insertBefore(el, el_org.nextSibling);
}