11325 sujets

JavaScript, DOM et API Web HTML5

Pages :
Bonjour à tous,
Aujourd'hui gros sujet, et j'ai conscience de l'ambition de ma demande.
Je réalise actuellement un site portfolio/vitrine d'un illustrateur. N'étant absolument pas programmeur et me lançant dans cette aventure sur mon temps libre, j'implémente beaucoup de chose que j'ai pu trouver selon mes recherches internet (principalement tout ce qui attrait au développement genre JS, libraries, PHP etc).
Bref un gros noob quoi. J'ai donc plusieurs galeries d'images a gérer et pour le moment j'utilise ce rendu (la démo ne fonctionne pas mais remplacez les images par n'importe quelle 1er résultat de Google pour constater, mais bon le code est là):
- https://codepen.io/ettrics/pen/VvxmPV
Tout est plutôt pas mal jusqu’à ce que je tombe sur cette galerie:
- https://gloss.gallery/portfolio
Et là c'est le drame car tout me plait, l'affichage où les previews des images (malgré leur tailles variables, ce qui est mon cas également) se mettent façon mur de briques, le fond de l'image en court qui est cette même image mais flouté, les transitions douces sur les boutons prev et next ainsi que le "show more +".
J'ai donc fait pas mal de recherches et de tests (voici maintenant plus d'une semaine) pour obtenir ces résultats selon mon ordre de préférence, 1. le fond de l'affichage fullscreen de l'image visible flouté, 2. la galerie automatiquement ajusté dans une colonne avec aucun vide entre les images et 3. un lazy loading (pas besoin du bouton "show more +". Et je n'ai trouvé de plus ou moins pertinent que ceci:
1 le flou:
- https://www.jqueryscript.net/slider/carousel-blurred-background-product.html
le classement des preview type mur de brique:
- https://codepen.io/iamsaief/pen/jObaoKo
ou encore la fonction
column-count: 3;

le lazy loading:
loading="lazy"
au sein d'une balise img

Sauf que bien sur impossible de combiner tout ces éléments ensemble avec ma galerie actuelle (cf 1er lien), même la simple balise loading="lazy" ne semble pas fonctionner.

Donc si des personne ont des idées de mots clé pour décrire ces éléments qui m'aiderai a trouver mon bonheur sur google (anglais et/ou français). Ou bien si des aventuriers se sentent le courage de m'aider avec le code directement.
Modifié par westman (11 Jan 2022 - 13:22)
Modérateur
Bonjour,

Déjà, à ta place, je virerais MaterialPhotoGallery(), non pas parce que c'est un mauvais plan, mais parce qu'il "prend la main" en quelque sorte, et qu'après ça devient difficile d'adapter le css.

Je suis en train de regarder pour le reste de tes questions. Mais ça peut prendre un peu de temps.

Amicalement,
Ouais je me disais aussi ça, c’est pour ça que j'ai tenté avec un truc plus classique type lightbox mais sans grand succès non plus.
Pas de problème c'est déjà très sympa de prendre le temps de se pencher sur mon soucis
Ouah trop cool merci Smiley smile .
Je sais pas trop comment te remercier c’est vraiment super sympa \o.
J'ai un peu bidouillé les propriétés des boutons (la croix pour fermer l'aperçu est en énorme au milieu de l'écran Smiley ravi ) et j'ai pu corriger le truc assez facilement.
Je me répète mais encore merci j'y ai passé tellement de temps.
Modérateur
Bonjour,

Effectivement, la croix était énorme, mais ça semblait ne le faire que sur firefox.

J'ai corrigé la solution https://jsfiddle.net/parsimonhi/ey0mbdc2/ en remplaçant :
.m-p-g__fullscreen button svg {
  pointer-events: none;
}
par
.m-p-g__fullscreen button svg {
  display: block;
  width: 2em;
  height: 2em;
  pointer-events: none;
}

Amicalement,
Modifié par parsimonhi (12 Jan 2022 - 11:29)
Oui merci j'avais corrigé Smiley smile .
Par contre je ne trouve pas où réduire le diamètre des boutons, ni comment avoir des bords nets sur les cotés du navigateur pour le fond flou Smiley ohwell .
Je met le sujet en résolu.
Modifié par westman (12 Jan 2022 - 19:32)
Modérateur
Bonjour,

Ci-dessous une version un peu plus robuste : https://jsfiddle.net/parsimonhi/r3a1pqLg/

J'ai modifié le nom des classes. J'ai mis des svg de mon cru pour les boutons.

Et surtout j'ai rajouté l'effet qui, quand on clique sur une photo dans la liste des photos qui s'affiche sur 3 colonnes, fait aller cette photo de sa position dans la liste jusqu'au milieu de l'écran. Cet effet était présent dans ton slider, mais pas dans celui dont tu voulais t'inspirer. J'ai mis un peu de temps à trouver une solution appropriée pour que ce soit visuellement agréable, la difficulté étant la présence de l'image floutée. C'est pour ça que je n'avais pas mis cet effet dans mes versions précédentes.

Pour avoir cet effet, c'est la ligne suivante dans le js qui indique quel effet est utilisé :
let transitionMode = "topLeftBottomRight";

Si tu préfères l'effet simple de mes versions précédentes, tu remplaces cette ligne par :
let transitionMode = "opacity";

Pour la taille des boutons, il faut modifier width et height de .p_s_h__slider button. Et j'ai finalement retiré les width et height pour les svg dont on peut désormais se passer même avec firefox.

EDIT: note pour pour les boutons précédents et suivants, if suffit respectivement de cliquer dans le tiers de gauche de l'écran ou le tiers de droite de l'écran pour changer de photo.

Pour le flou qui ne va pas jusqu'au bord, j'ai fait "déborder" l'image floutée de l'écran (précédemment, elle faisait juste la taille de l'écran, et du coup, le flou était "influencé" sur les bords par l'extérieur qu'on ne voit pas mais qui peut être par exemple noir). Normalement, ça devrait rendre les bords plus "nets" (si j'ai bien compris ce que tu voulais dire).

Enfin, j'ai éclairci (un peu) la photo floutée qui finalement me semble trop sombre. Ça se modifie via la ligne suivante dans le css (voir le code css de .p_s_h__slider img.blurred). Il suffit de modifier la valeur de la "brightness" :
filter: blur(2em) brightness(75%);


Amicalement,
Modifié par parsimonhi (12 Jan 2022 - 21:04)
Bonsoir,
Yes merci. J'avais déjà changé pas mal de paramètres (y compris le niveau de flou, la luminosité et la position/dimension des bouton), mais je n'arrivais pas a changer celle de leurs fonds (la taille du disque). J'avais bien envisagé de les remplacer par des .png que j'aurai fait mais bon, j'aime bien l'aspect tout en code avec les svg.
Merci de toutes ces précisions en tout cas. Mais surtout, de ton temps. Ça m'a vraiment dépanné Smiley ravi .
Modifié par westman (12 Jan 2022 - 21:21)
Modérateur
Bonjour,

Si tu as changé le niveau du flou, alors, selon ce que tu as mis, il faudra peut-être que tu changes aussi la dimension de l'image floutée (pour ne pas avoir à nouveau des problèmes en bordure de l'écran).

Ça se change dans les propriétés css de .p_s_h__slider img.blurred. Quand le niveau de flou est de 2em, il faut qu'elle dépasse de 2em (il faut donc éventuellement modifier top, left, bottom, right, ou width et height selon tes préférences et l'effet recherché, car il est même possible de décaler l'image floutée vers la droite ou vers la gauche par exemple).

Amicalement,
Oui j'ai changé mais visiblement sur mon firefox ça ne semble pas être pris en compte... C'est pas bien grave c'est un détail. Tout les tests que j'ai fais avec différents paramètres depuis mes recherches google n'ont jamais fonctionné (ta technique, celle avec des margins, celles avec scale, rien à faire). J'avais déjà fait des tests avec des images en background et des effets de flous.

edit: Par contre je viens de me rendre compte de quelque chose. L'image apparait en fade in mais lorsque l'on fait next ou prev l'image disparait instantanément avant de laisser place au fade in de l'image suivante ou précédente (et aucun fade sur le fond flou). Entre temps j'avais changé le 1er code que j'ai posté tout au début pour une lightbox plus classique en essayant de bidouiller avec cette dernière. Et j'avais un cross fade entre les images (comme avec la galerie modèle d'ailleurs). C'est en revérifiant ce que j'avais fait précédemment avec la galerie lightbox que je m'en suis rendu compte.
Je vais faire des recherches pour voir si je peux modifier ça dans le javascript.

Bonne nuit.
Modifié par westman (13 Jan 2022 - 02:10)
Modérateur
Bonjour,

Pour le "fade in" du fond flou, j'ai fait exprès qu'il n'y en ait pas (si toutefois j'ai bien compris ce que tu entends par "fade in". Pour le mettre, ça se passe dans la fonction slide() dans le js de l'exemple https://jsfiddle.net/parsimonhi/r3a1pqLg/

Il suffit de remplacer :
    limpid.style.transition = "none";
    limpid.style.opacity = "0";
    limpid.src = list[ko].src;
    blurred.src = list[ko].src;
    limpid.offsetHeight;
    limpid.style.transition = "opacity 1s";
    limpid.style.opacity = "1";
par
    limpid.style.transition = "none";
    blurred.style.transition = "none";
    limpid.style.opacity = "0";
    blurred.style.opacity = "0";
    limpid.src = list[ko].src;
    blurred.src = list[ko].src;
    limpid.offsetHeight;
    limpid.style.transition = "opacity 1s";
    blurred.style.transition = "opacity 1s";
    limpid.style.opacity = "1";
    blurred.style.opacity = "1";
On peut régler la durée du "fade in" en changeant le nombre de secondes (actuellement 1s) dans les lignes limpid.style.transition = "opacity 1s"; et blurred.style.transition = "opacity 1s";

EDIT: petite amélioration, il vaut mieux ne lancer la transition que quand l'image est déjà chargée.

Si on ne fait la transition que sur l'image qui est devant :
    limpid.style.transition = "none";
    limpid.style.opacity = "0";
    limpid.offsetHeight;
    limpid.onload = function() {
      this.style.transition = "opacity 1s";
      this.style.opacity = "1";
    };
    limpid.src = list[ko].src;
    blurred.src = list[ko].src;
Et si on fait la transition aussi sur le fond flou :
    limpid.style.transition = "none";
    blurred.style.transition = "none";
    limpid.style.opacity = "0";
    blurred.style.opacity = "0";
    limpid.offsetHeight;
    limpid.onload = function() {
      this.style.transition = "opacity 1s";
      this.style.opacity = "1";
    };
    blurred.onload = function() {
      this.style.transition = "opacity 1s";
      this.style.opacity = "1";
    };
    limpid.src = list[ko].src;
    blurred.src = list[ko].src;
À noter que :
- sur safari, tout se passe bien,
- sur firefox, on a un "effet sombre" tout autour de l'écran (dû sans doute au blur qui se fait mal sur le bord),
- sur chrome, on a un "effet sombre" tout autour de l'écran durant la transition, et chrome supprime cet effet sombre en fin de transition seulement.

Amicalement,
Modifié par parsimonhi (13 Jan 2022 - 12:20)
Modérateur
Bonjour,

Encore un petit bug (je me demande si on va le finir un jour, ce truc Smiley lol ) : quand on clique sur les boutons suivant ou précédent (et non à côté), ça avance ou recule de 2 images dans la liste. La raison est que ces boutons n'avancent ou reculent eux-même que de 1 image, mais en dessous de chacun d'entre eux, on a un gros "bouton" transparent qui fait un tiers de l'écran, et qui avance ou recule d'1 image lui-aussi). Il faut donc stopper la propagation du clic pour éviter ce double avancement ou recul.

Correction ici : https://jsfiddle.net/parsimonhi/vfr9y6ob/

Au passage, j'ai rajouté une icone de loading qui apparait quand une image est longue à charger, ce qui est rare en pratique vu qu'on les charge déjà une fois dans la liste de départ. Ça n'arrive que si on affiche une image courte à charger sans attendre que la liste des images soit entièrement chargée, et qu'on enchaine avec le bouton suivant vers une image longue à charger.

Amicalement,
Modifié par parsimonhi (13 Jan 2022 - 14:35)
effectivement je viens de constater ce bug, je ne m'en étais pas rendu compte. Merci pour cette correction Smiley smile .
quand aux fades, je décrirai ça comme suit:
fade in: apparition du contenu
fade out: disparition du contenu (genre fondu au noir au ciné)
cross fade: transition du contenu (effet de la galerie que j'ai pris en modèle)
Modérateur
Bonjour,

Une cross fade sur des images floutées à la volée et dont on fait en plus varier la clarté par ailleurs, c'est carrément abusé !

Ce n'est plus du bol qu'il faut pour que ça marche un peu partout, c'est un miracle !

T'es sûr que tu veux ça ? Smiley cligne

Amicalement,
Euh, par contre, pourquoi lorsque je supprime:

let i18n = {
    Close: "Fermer",
    Pred: "Précédent",
    Next: "Suivant",
    Loading: "Chargement"
  };

le click d'agrandissement de images ne fonctionne plus? (j'aimerai bien me passer de ces infobulles). Pareil, j'ai bien essayé de supprimer les libellés mais il m'affiche l'infobulle, à juste titre, undefined.
Idem si je veux modifier le loading, plus de possibilité de cliquer sur l'image.

edit: En fait, ne connaissant pas JS, lorsque je compare les 2 derniers codes (celui qui corrige le bug et celui bugué) si je veux retirer les infos-bulles et le loading tout en pouvant continuer de voir les images en grand, je dois tout simplement reprendre le code précédent. (je dois retirer les ev et les
ev.stopPropagation();
et tout se qui se rapport au loading). Et là, paf le bug est de retour.
edit2: Je n'avais pas vu votre réponse désolé. Bah en fait j'aimerai juste reproduire la galerie modèle: https://gloss.gallery/portfolio
Ouais non mais j'ai bien conscience que j'abuse carrément... Vous m'avez beaucoup aidé jusque là je vais me débrouiller.
Modifié par westman (14 Jan 2022 - 00:18)
Modérateur
Bonjour,

J'ai modifié https://jsfiddle.net/parsimonhi/vfr9y6ob/ et j'ai mis l'affichage des info-bulles en option. C'est la ligne suivante dans le js qui permet de contrôler ça (si btnHasTitle vaut 0, on n'affiche pas les info-bulles, s'il vaut 1, on affiche les info-bulles) :
let btnHasTitle = 0;
Par défault, j'ai mis btnhasTitle = 1; Il faut donc changer le 1 en 0 pour supprimer les info-bulles. À noter que si l'on suit les bonnes pratiques, on doit mettre les info-bulles, surtout si comme dans le cas présent, les boutons sont des images. De même il faudrait que les images aient toutes un attribut "alt".

Le sujet était intéressant, et le site de référence est effectivement joli. Ce code resservira ! Donc pas de soucis (je plaisantais quand je disais que c'était abusé). Smiley cligne

Le site de référence a un code assez complexe, dodu, et obscur. C'est un peu difficile de comprendre comment il a été fait. J'ai donc fait un code complètement différent sans chercher à comprendre comment était fait le code d'origine. Si j'arrive à faire le cross fade sur les images de fond sans qu'il bogue (ce qui n'est pas garanti), je le posterai ici.

Amicalement,
Le fond mais surtout les images de preview Smiley lol .
Non mais moi j'ai vraiment le sentiment d'abuser donc bon, je suis content que ça vous ai servit un minimum également.
Oui j'ai assez vite laissé tomber l'analyse du site, les noms de class affreux, les enchevêtrement de balises, et me concernant, ne parlons même pas du JS... J'ai d'ailleurs trouvé le CMS, godaddy.com mais ça ne m'a pas beaucoup aidé.
Bref merci pour tout Smiley smile .
Modérateur
Bonjour,

Nouvelle version : https://jsfiddle.net/parsimonhi/onegz2p6/

J'ai ajouté un fade-out sur l'image limpide quand on fait "Suivant" ou "Précédent". Je n'ai pas mis de fade-out sur l'image floutée (c'est déjà suffisamment la cacophonie avec tous ces effets), mais par contre, j'ai mis un fond derrière cette image ayant la couleur moyenne de l'image. Ça règle au passage le problème sur firefox près des bords du slider (qui étaient assombris).

Note : je n'aime vraiment pas les fade-out, tu l'as peut-être compris. J'ai donc du coup mis une option qui permet de les désactiver. C'est la ligne ci-dessous dans le js (il faut remplacer le 1 par 0) :
let fadeOutOn = 1;

EDIT: fadeOutOn = 1 signifie qu'on fait un fade-out, et fadeOutOn = 0 signifie qu'on ne fait pas de fade-out.

Amicalement,
Modifié par parsimonhi (15 Jan 2022 - 00:37)