[Résolu] Aide à la réalisation d'une galerie

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)

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

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é .
Modifié par westman (12 Jan 2022 - 21:21)

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)

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)

Bonjour,
Merci pour toutes ces précisions,
Bonne fin de journée.

Bonjour,

Encore un petit bug (je me demande si on va le finir un jour, ce truc ) : 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)

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é).

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,