Galerie Bootstrap petit bug

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Galerie Bootstrap petit bug

Izno69

Bonjour à tous !

Petit souci avec une galerie photo bootstrap qui marche correctement sauf pour le premier chargement de celle-ci ou des photos se superpose.
Puis on refresh la page et c'est réglé mais si on vide les caches rebelote.

J'ai l'impression que c'est un problème de position:relative mais je peux me tromper.

CSS :

Code :

.grid-item .post_thumb img{
width:100%;
height:auto;
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-ms-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
float:left;
}
.grid-item .post_thumb{
overflow:hidden;
position:relative;
margin:0 0 25px;
}
.grid-item:hover .post_thumb img{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-ms-transform:scale(1.1);
transform:scale(1.1);
}
.grid-item:hover .gallery-overlay{
opacity:1;
visibility:visible;
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1);
}

HTML :

Code :

<section id="gallery">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row grid">
<div class="col-xs-6 col-sm-4 col-md-3 grid-item">
<div class="post_thumb">
<img src="img/gallery/1.jpg" alt="">
<div class="gallery-overlay">
<a href="img/gallery/1.jpg" class="fancybox" title="Gallery Image 1"><i class="fa fa-camera"></i></a>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 grid-item">
<div class="post_thumb">
<img src="img/gallery/2.jpg" alt="">
<div class="gallery-overlay">
<a href="img/gallery/2.jpg" class="fancybox" title="Gallery Image 2"><i class="fa fa-camera"></i></a>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 grid-item">
<div class="post_thumb">
<img src="img/gallery/13.jpg" alt="">
<div class="gallery-overlay">
<a href="img/gallery/13.jpg" class="fancybox" title="Gallery Image 3"><i class="fa fa-camera"></i></a>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 grid-item">
<div class="post_thumb">
<img src="img/gallery/4.jpg" alt="">
<div class="gallery-overlay">
<a href="img/gallery/4.jpg" class="fancybox" title="Gallery Image 4"><i class="fa fa-camera"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

---------------
Sites perso : www.websitin.fr - www.pokerstrat.fr

Publicité

Izno69

Le lien de la page en question si ca peu aider.

https://www.ozonefrance.fr/galerie-ozone-spa-marin.php

---------------
Sites perso : www.websitin.fr - www.pokerstrat.fr

mechkurt

Sur quel navigateur, car sur mon Firefox je n'ai pas le probleme.
Peut être essayer de mettre un min-width sur l'image en css ou de remplir les balises width et height de l'image.

---------------
D3

Izno69

Effectivement ca bug pas sur Firefox mais sur tous les autres.
Chrome, Opera, Edge...

Message édité par Izno69 le 09-11-2023 à 14:56:44

---------------
Sites perso : www.websitin.fr - www.pokerstrat.fr

gatsu35

Blablaté par Harko

la page fait 18 MO, ce qui est une abérration, tes images étant donné qu'elles sont petites devraient être de petite taille.
Donc je te conseille avant tout chose, de générer des miniatures de ces images avec un taux de compression JPEG de 70% ça sera largement suffisant, et même les images fullsize tu peux les compresser et les faire tenir dans 100ko au lieu de 500ko.

Ensuite comme disait l'ami mechkurt, ton pb se produit parce que tes images se chargent et que ton composant n'a pas la hauteur finale de tes images.

---------------
Blablaté par Harko

Izno69

Comment tu fais pour connaitre le poids de la page ?

Ok je vais réduire les miniatures et faire des webp pour les grands format.

Message édité par Izno69 le 11-11-2023 à 02:31:57

---------------
Sites perso : www.websitin.fr - www.pokerstrat.fr

gatsu35

Blablaté par Harko

l'ispecteur de code de chrome, tu as le poids total du bordel téléchargé (bon c'est à la louche qu'il affiche) mais 18 mo, c'est chaud quoi.

Le dernier site que j'ai fait j'ai optimisé à fond malgré les images et tout le reste et la page ne dépassait pas 1.7Mo au chargement et 2.4Mo au scroll.

J'ai tout fait à la main que ce soit les JS, animations et tout le reste, mais malgré cela il me reste encore 150ko de JS et 100ko de CSS.

Je vais essayer à l'avenir de faire des packages et les charger en fonction des modules qui ont besoin de JS

Et pour les images j'ai fait un script en nodeJS qui utilise sharp, et qui va me convertir toutes les images en webp/avif et j'ai utilisé picture dans le site :

Code :

<picture>
<source type="image/avif" media="(max-width:649px)" srcset="/assets/img/image-logo.png_low.avif">
<source type="image/avif" srcset="/assets/img/image-logo.png.avif">
<source type="image/webp" media="(max-width:649px)" srcset="/assets/img/image-logo.png_low.webp">
<source type="image/webp" srcset="/assets/img/image-logo.png.webp">
<img src="/assets/img/image-logo.png" loading="lazy">
</picture>

Picture n'est que du sucre, et au niveau style c'est img qui travaille au niveau du style.
Apres si tu utilise du JS pour bricoler, il faudra voir.

Enfin bref c'est tout un tas d'optimisations qui manque sur ta page.

---------------
Blablaté par Harko

gatsu35

Blablaté par Harko

Et vire ce loader au chargement du site, ce n'est pas une application c'est un site qui se charge.

Si je suis en 3G ou 4G low, je dois me taper un loader pendant 1minute en attendant que le reste du site charge...

Message édité par gatsu35 le 11-11-2023 à 07:48:32

---------------
Blablaté par Harko

Izno69

Merci pour ton temps et tes conseils en tout cas

---------------
Sites perso : www.websitin.fr - www.pokerstrat.fr

FORUM HardWare.fr

Programmation

HTML/CSS

Galerie Bootstrap petit bug

Sujets relatifs
Galerie d'image automatique	Héberger ma galerie... Je suis perdu
CMS pour galerie botanique	Lancer galerie lightbox sans images dans la page
Bootstrap	Boot sector, coder un petit jeu ?
Petit site d’organisation de sorties	Site one page, bootstrap 4 et validation PHP
Petit script clavier virtuel	Programmer un petit moteur de recherche interne
Plus de sujets relatifs à : Galerie Bootstrap petit bug

Page générée en 0.074 secondes