[Résolu] Code jquery qui se déclenche 4 fois sur 5...

Je ne m'y connais pas trop en jquery, encore moins en javascript, mais j'ai fait la chose suivante sur un site qui pour le moment est en local :
Afin de créer une ombre portée interne + un cadre sur les photos qui seront intégrées plus tard par un utilisateur via wordpress sur le child theme d'un thème premium, je parcours les photos d'une certaine classe de la page et crée une div devant chacune d'entre elles que je positionne en absolute, div qui a l'ombre portée et le cadre et qui vient se superposer à la photo.
Ca marche.
Sauf que ça ne marche pas tout le temps : si j'ouvre le site dans un deuxième onglet de mon chrome en cliquant sur le logo du site, et que je vais voir ce deuxième onglet, 1 fois sur 4 ou 5, les cadres (div) sont créés, mais le script ne leur a pas donné la taille adéquate (n'a pas eu le temps ?).
Pourtant, je crois lui dire d'attendre le chargement de l'image...

Voici mon code de débutant :
(euh, ne vous occupez pas du margin, il est là pour gérer le centrage en responsive.)

    $('.cadre-photo').each(function(i) {
        $(this).before('<div class="cadre-parent"></div>');
        $(this).on('load',function(){
            largeurImage    = $(this).width(); 
            hauteurImage    = $(this).height();
            $(this).prev().width(largeurImage);
            $(this).prev().height(hauteurImage+1);
            if($(window).width()<964){  
                marginImage = (largeurImage/2);
                $(this).prev().css({ 'margin-left': -marginImage});
                $(this).prev().css({ 'margin-left': -marginImage, 'display':'block' });
            }else{
                $(this).prev().css({ 'margin-left': 0}); 
                $(this).prev().css({ 'margin-left': 0, 'display':'block' });
            }
        }); 
    });

Désolé si mon code n'est pas celui d'un pro hein ^^

Je joins une image pour montrer ce que je veux dire par ombre interne (inset) + cadre :


Modifié par Manhattan (15 Apr 2015 - 10:11)

Salut,

C'est un peu dur de te répondre comme ça..

Faudrait utiliser l'inspecteur de firefox, avec le mode débuggeur permettant de voir les erreurs JS.

Oui, désolé de ne pas présenter d'exemple.
Il semblerait qu'il ait le temps de créer la div à la volée, mais pas de lui affecter les bonnes tailles.
De même que j'attends le chargement des photos pour récupérer leurs valeurs

$(this).on('load',function(){

...est-il possible d'attendre le chargement complet des div ou de lui dire de n'exécuter le reste (redimensionnement) que lorsque la div est réellement créée ?

Et bien je remercie sacrément _laurent pour avoir trouvé la solution à savoir :

Expatrier le maximum de choses en css :

.photo{
    position:relative;
}

.cadre {
    position:relative;
    display:inline-block;
    line-height: 0;
    border:5px solid grey;
    margin:5px;
}
.cadre::after{
    content:"";
    box-shadow:         inset 0 0 5px rgba(0,0,0,0.5);
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

et se limiter au strict minimum avec un wrap sous jquery sans se préoccuper du on load des images :

    $('.photo').each(function(i) {
        $(this).wrap( "<div class='cadre'></div>" );
    });

Ca marche, c'est beau, que demande le peuple ?

Modifié par Manhattan (15 Apr 2015 - 14:49)

Manhattan a écrit :
Et bien je remercie sacrément _laurent pour avoir trouvé la solution

UNE solution (doit y en avoir d'autres) et surtout que c'est même pas la solution de ton problème mais une autre façon d'y arriver

Au passage je crois que le

.photo{
    position:relative;
}

est un reste d'un de mes tests et ne sert plus a grand chose... (si je peux éviter de te pourrir ton css avec mes classes inutiles... )

Vrai pour le positionnement, et concernant la solution, que ce soit par un contournement ou une résolution, je cherchais à supprimer le problème, peut m'importait la technique pourvu qu'elle fut légère, et elle l'est ^^