Valore per Class dinamica

[effettoMapet]

Salve a tutti, premetto che non sono un programmatore, mi occupo di html/css.

Su un sito di commercio elettronico (quindi foto dinamiche) mi è stato chiesto di fare determinate elaborazioni grafiche per differenziare la prima foto dalle altre. Quindi ho pensato che l'unica soluzione che ho per riuscire è avere una class differente per singola foto.

Il sistema di default non associa class alle img cosi ho iniziato a scrivere questa banale stringa js con la quale associo la stessa class a tutte le img:

$(document).ready(function() {
$('.product-gallery-view > img').addClass('xx_01');
});

questo il risultato:
<img src="/images/abiti/a1b-vbc868262.jpg" class="xx_01">
<img src="/images/abiti/a6c-xbc868254.jpg" class="xx_01">
<img src="/images/abiti/a23-vbc8f34ve.jpg" class="xx_01">

Potete PER FABORE arricchiere il mio codice per poter arrivare ad avere la differenziazione di cui ho bisogno es:
<img src="/images/abiti/a1b-vbc868262.jpg" class="xx_01">
<img src="/images/abiti/a6c-xbc868254.jpg" class="xx_02">
<img src="/images/abiti/a23-vbc8f34ve.jpg" class="xx_03">

GRAZIE per il vostro interesse e prezioso aiuto !!

[ninja72]

Mai usato jquery, se ti puo essere utile lo puoi fare tranquillamente in vanilla javascript ES6.

 const gallery = document.querySelectorAll('.product-gallery-view > img')
        let counter = 0

        function cssClass() {
            gallery.forEach((img, idx) => {
                counter = idx + 1

                counter < 10
                    ? img.classList.add(`xx_0${counter}`)
                    : img.classList.add(`xx_${counter}`)
            })
        }
        window.addEventListener('DOMContentLoaded', cssClass)

[effettoMapet]

ninja72 GRAZIE 1000 PER IL TUO INTERESSE, ma ho bisogno di elaborarlo in Js :-)

[ninja72]

Ho fatto un refactor del mio codice da vanilla a jquery, vedi se cosi funziona. ciao

 $(document).ready(function () {
            let counter = 0;
            $('.product-gallery-view > img').each((idx, img) => {
                counter = idx + 1;
                counter < 10
                    ? $(img).addClass(`xx_0${counter}`)
                    : $(img).addClass(`xx_${counter}`)
            });
        });

[effettoMapet]

GRAZIE ninja72 !!!!