Plugin Isotope, transition avec chrome et safari

**cleo57** · 18/01/2016, 22h20

Bonjour,
Je rencontre un problème sur mon site au moment de l'affichage des pages filtrées : les transitions sont saccadées sous chrome et safari alors que tout est fluide avec firefox. Je n'arrive pas à comprendre d'où cela peut venir.

Voici mon Html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html> 
<html lang="fr"> 
 
<head> 
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
    <title>Accueil</title> 
    <meta name="description" content="" /> 
 
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="lightbox.css">
 
    <link href='https://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
 
    <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 
</head> 
 
<body id="accueil">
 
<header>
    <section class="container">
        <div id="logo">
            <img src="img/logo.png">
        </div>
        <nav>
            <ul id="filtre">
                <li class="active"><a href="#" data-filtre="*">All</a></li>
                <li><a href="#" data-filtre=".diary">Diary</a></li>
                <li><a href="#" data-filtre=".lith">Lith</a></li>
                <li><a href="#" data-filtre=".color">Color</a></li>
            </ul>
        </nav>
    </section>
    </header>
 
 
	<section id="folio">
 
        <div class="projet diary">            
            <a href="img/image-1.jpg" data-lightbox="portfolio-diary" data-title="Légende de l'image"><img src="img/image-1.jpg"></a>
        </div>
 
        <div class="projet diary">
            <a href="img/image-2.jpg" data-lightbox="portfolio-diary" data-title="Légende de l'image"><img src="img/image-2.jpg"></a>
        </div>
 
        <div class="projet diary">
            <a href="img/image-3.jpg" data-lightbox="portfolio-diary" data-title="Légende de l'image"><img src="img/image-3.jpg"></a>
        </div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="js/lightbox.js"></script>
    <script src="js/isotope.js"></script>
    <script src="js/site.js"></script>
 
</body>
</html>

Une partie du CSS:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/* ---- ISOTOPE CLASSES ANIMATION ---- */
 
.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}
 
.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}
 
.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}
/*BODY*/
 
#folio {width: 980px; position: relative; margin: 50px auto;}
#folio:after {content: ''; display: block; width: 0px; height: 0px; clear: both;}
 
.projet {width: 225px; background: #fff; float: left; margin: 10px; overflow: hidden; transition: all 0.3s;}
.projet:hover {border: 1px solid #fff; box-shadow: 0 0 10px #777;}
.projet img {width: 100%;}

La partie Jquery:

Code jquery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
 
$(function() {
 
 
    // Isotope projets folio
 
    $('#folio').isotope({
 
        itemSelector: '.projet',
        layoutMode: 'masonry',
        filter:'*',
            animationOptions: {
                duration:500,
                easing:'linear',
                queue:false
            }
 
    });
 
    // Filtre projets
 
 
    $('#filtre li a').click(function(){
 
    $('#filtre li').removeClass('active');
    $(this).parent().addClass('active');
 
    filtre = $(this).attr('data-filtre');
 
    $('#folio').isotope({ 
        itemSelector: '.projet',
        layoutMode: 'masonry',
        filter:filtre,
            animationOptions: {
                duration:500,
                easing:'linear',
                queue:false
            } 
    });
 
    return false;
 
    });
 
    // LIGHTBOX
 
    $('#folio a').lightBox();
 
});

Je vous remercie pour votre aide,

**NoSmoking** · 19/01/2016, 19h46

Bonjour,
pourquoi rajouter tes effets CSS, la librairie s'en charge très bien ?

Teste l'exemple que j'avais mis dans cette discussion.

**cleo57** · 19/01/2016, 20h31

Bonsoir et merci pour ta réponse,
Oui ton exemple marche très bien, mais je ne comprends pas ce que je dois changer dans mon code pour que ça marche aussi. Si je supprime le CSS le problème persiste...
Je n'arrive pas à comprendre quelles lignes je dois rajouter dans mon fichier .JS ?

**NoSmoking** · 21/01/2016, 19h10

Dans ton code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 $(function() {
     // Isotope projets folio
     $('#folio').isotope({
         itemSelector: '.projet',
         layoutMode: 'masonry',
         filter: '*',
         animationOptions: {
             duration: 500,
             easing: 'linear',
             queue: false
         }
     });
     // Filtre projets
     $('#filtre li a').click(function() {
         $('#filtre li').removeClass('active');
         $(this).parent().addClass('active');
         filtre = $(this).attr('data-filtre');
        // COMME UN AIR DE DEJA VU //
         $('#folio').isotope({
             itemSelector: '.projet',
             layoutMode: 'masonry',
             filter: filtre,
             animationOptions: {
                 duration: 500,
                 easing: 'linear',
                 queue: false
             }
         });
         return false;
     });
     // LIGHTBOX
     $('#folio a').lightBox();
 });

commence par supprimer les doublons

**cleo57** · 21/01/2016, 22h43

Bonsoir,

Si je supprime le doublon l'effet de filtre ne se fait plus et si je supprime "Isotope projets folio" mon problème reste identique...

Je suis désolée mais je suis débutante en Jquery...

Merci pour ton aide

**NoSmoking** · 23/01/2016, 19h07

Je ne parlais pas de tout supprimer mais de ne remettre à jour que le filtre, cela pourrait donner le code suivant revu et légèrement corrigé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  $('#filtre li a').on('click', function(ev) {
      // supprime action par défaut
      ev.preventDefault();
      // élément recevant l'action
      var $this = $( ev.target);
 
      // supprime la classe sur élément en cours
      $('#filtre .active').removeClass('active');
//      $('#filtre li').removeClass('active');
 
      // ajoute la classe à l'élément cliqué
      $this.parent().addClass('active');
//      $(this).parent().addClass('active');         
 
      // récupération filtre à appliquer
      var filtre = $this.attr('data-filtre');     
//      filtre = $(this).attr('data-filtre');               
 
      // applique nouveau filtre
      $('#folio').isotope({ filter: filtre });      
//         $('#folio').isotope({
  });

Remarque : tu n'es pas obligé de mettre des <a> dans tes <li>.

Edit (24.01.2016) : $('#filtre li a').on('click', function() { devient $('#filtre li a').on('click', function( ev) {

**cleo57** · 24/01/2016, 11h44

Merci pour ta réponse,
Cependant, j'ai beau essayer , cela ne marche pas : avec ce code le filtre ne se fait plus lorsque je clic sur un des éléments du menu, le filtre est inactif.

Code jquery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
$(function() {
     // Isotope projets folio
    $('#folio').isotope({
         itemSelector: '.projet',
         layoutMode: 'masonry',
         filter: '*',
         animationOptions: {
             duration: 500,
             easing: 'linear',
             queue: false
         }
     });
 
     // Filtre projets
    /* $('#filtre li a').click(function() {
         $('#filtre li').removeClass('active');
         $(this).parent().addClass('active');
         var filtre = $(this).attr('data-filtre');
        
         $('#folio').isotope({
             itemSelector: '.projet',
             layoutMode: 'masonry',
             filter: filtre,
             animationOptions: {
                 duration: 500,
                 easing: 'linear',
                 queue: false
             }
         });
         
        });
        */
 
        $('#filtre li a').on('click', function() {
      // supprime action par défaut
      ev.preventDefault();
      // élément recevant l'action
      var $this = $( ev.target);
 
      // supprime la classe sur élément en cours
      $('#filtre .active').removeClass('active');
//      $('#filtre li').removeClass('active');
 
      // ajoute la classe à l'élément cliqué
      $this.parent().addClass('active');
//      $(this).parent().addClass('active');         
 
      // récupération filtre à appliquer
      var filtre = $this.attr('data-filtre');     
//      filtre = $(this).attr('data-filtre');               
 
      // applique nouveau filtre
      $('#folio').isotope({ filter: filtre });      
//         $('#folio').isotope({
  });
 
    return false;
 
});

**NoSmoking** · 24/01/2016, 16h35

j'ai oublié de récupérer l'enlèvement dans la fonction. Le code est maintenant corrigé !

**cleo57** · 24/01/2016, 17h53

Merci Nosmoking ! Cela marche beaucoup mieux maintenant, mais je remarque que la fluidité ne ne fait toujours pas uniquement lorsque je passe de "all" qui est actif par défaut, aux autres filtres.
Si par exemple "color" est actif et que je clique ensuite sur "lith" la transition est fluide, mais si je passe de "all" à "lith" la transition est saccadée..

Pourquoi cela marche pourtant avec firefox ...?

**NoSmoking** · 24/01/2016, 19h36

Pourquoi cela marche pourtant avec firefox ...?

seule une page en ligne pourrait permettre d'essayé d'y voir plus clair.

**cleo57** · 24/01/2016, 23h11

Oui, c'est ce que je pense aussi...
J'ai mis en ligne rapidement ce soir à cette adresse

Je remarque que le temps de chargement des images est excessivement long, de plus elles ne se rangent pas convenablement et s'empilent les unes sur les autres.... Elles sont peut-être trop lourdes ? Elles sont à 72dpi, avec un bord large de 1250 px.

Merci à toi

**NoSmoking** · 25/01/2016, 19h08

Elles sont à 72dpi, avec un bord large de 1250 px.

effectivement Chrome à du mal mais ils ont tous du mal à afficher tes images au démarrage, pas sûr que le format soit terrible.

Tu n'utilises pas le principe des lightBox comme il le faut.
- affichage des vignettes (yaille réduite qui colle au conteneur)
- clic sur une vignette
- affichage de l'image grand format dans une lightBox

Il te faut commencer par créer tes vignettes, elles peuvent être crées dynamiquement coté serveur avec gimp par exemple.

**cleo57** · 25/01/2016, 20h54

Voilà, j'ai rajouté des vignettes à la place des grandes images et la page se charge beaucoup plus rapidement. Mais j'ai toujours ce problème d'empilement des images au premier chargement ? Et mon problème de départ: transitions pas fluides quand on passe d'un filtre à l'autre.

**NoSmoking** · 25/01/2016, 21h09

Tu as également, comme je le disais un problème avec le format de certaines images qui ne s'affiche pas bien au 1st chargement.

Dans ton CSS on trouve

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.projet {
    width: 225px;
    background: #fff;
    float: left;
    margin: 10px;
    overflow: hidden;
    transition: all 0.3s;
}

supprime au moins la transition.

**cleo57** · 25/01/2016, 21h34

Génial NoSmoking ! J'ai supprimé la transition avec le overflow: hidden, et cela marche ! C'est fluide maintenant ! Merci mille fois !

Par contre je remarque que l'effet d'empilement a lieu au premier chargement de la page sur "all" par défaut, si l'on y revient plus tard après avoir cliqué sur les éléments du menu, les images se déplient et se placent normalement.
Y aurait-il un moyen de faire en sorte que les images soient bien placées dès le 1er chargement ?

Encore merci pour ton aide

**NoSmoking** · 25/01/2016, 22h09

Je n'ai pas noté cela malgré les essais réalisés, pourrais tu préciser ?

**cleo57** · 25/01/2016, 22h37

Au chargement de la page d'accueil les vignettes se chevauchent à l'intérieur de chaque colonne, comme si on les disposait comme les cartes d'une réussite... Je ne sais pas si je suis bien claire...

On ne voit alors qu'une toute petite partie haute de chaque image. Ce phénomène ne se produit qu'au premier chargement de la page d'accueil ou si l'on rafraîchit la page : C-à-d lorsque c'est "all" qui est actif par défaut.
Si on navigue dans le site et que l'on re-clic sur "all" le phénomène ne se produit plus : les images sont bien en place et entièrement visibles.

Plugin Isotope, transition avec chrome et safari

jQuery

Discussions similaires

Partager

Partager