Discussion :

[Gilles_73]

Bonjour,
Voilà pour la petite histoire, je suis un graphiste spécialisé dans flash et qui vient de se mettre au HTMl 5, CSS et jquery.........et je n'arrive pas à résoudre 2 problèmes sur le plug-in Jquery Isotope.

Mon premier souci, le plug ne fonctionne pas sous Safari mobile….peut être une ligne de code à ajouter ?
Le deuxième, dans IE et Opera, la transition d’arrivée de mes box est toute simple avec juste un effet d’opacité tandis que dans Chrome, Safari et Firefox, j’ai à la fois cet effet d’opacité mais aussi un redimensionnement xscale et yscale. Et en fait, je souhaiterais désactiver cet effet de redimensionnement car trop gourmand en processeur….une idée ? Sachant que ce plug utilise soit le javascript pour les anciennes versions de navigateur, soit les CSS3 pour les dernières versions donc je ne sais pas si je dois modifier mon fichier css ou javascript.

Lien vers mon site : http://gillesn.perso.sfr.fr/isotope/index.html

Lien vers le plug-in Isotope : http://isotope.metafizzy.co

Ci-dessous le code dans ma page HTML

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
<script>  <!-- script isotope infinite scroll-->  
    $(function(){
      var $container = $('#container_box');
         $container.isotope({
        itemSelector : '.box_s,.box_m,.box_l,.box_xl'
      });
           $container.infinitescroll({
        navSelector  : '#page_nav',    // selector for the paged navigation 
        nextSelector : '#page_nav a',  // selector for the NEXT link (to page 2)
        itemSelector : '.box_s,.box_m,.box_l,.box_xl',     // selector for all items you'll retrieve
        loading: {
            finishedMsg: 'No more pages to load.',
            img: 'http://i.imgur.com/qkKy8.gif'
          }
        },
        // call Isotope as a callback
        function( newElements ) {
          $container.isotope( 'appended', $( newElements ) ); 
        }
      );
              });
  </script>

Merci d'avance pour votre aide. Je précise que je ne suis pas un expert en programmation javascript !

[Gilles_73]

Bonjour,
Pour ce plug jquery isotope Infinite scroll, j’ai trouvé une solution pour supprimer l’effet de transition sur l’arrivée de mes box lors du chargement des autres pages...mais du coup tous mes effets sont désactivés !

Pour rappel, lors du chargement de nouvelles pages, j’ai un effet de transition qui joue sur l’opacité de mes box que je souhaite garder mais aussi un effet de transition qui joue sur le redimensionnement des box (dans les principaux navigateurs sauf IE) que je souhaite supprimer……..

J’ai donc ajouté « transformsEnabled: false » dans mon code mais du coup, cette ligne de code impacte aussi l’effet de transition de replacement de mes box alors que je souhaiterais juste retirer l’effet de transition qui joue sur le redimensionnement des box.


Original sans cette dernière ligne de code :
http://gillesn.perso.sfr.fr/isotope/index.html

Avec l’ajout de cette dernière ligne de code:
http://gillesn.perso.sfr.fr/isotope_...fet/index.html

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
<script>  <!-- script isotope infinite scroll-->  
    $(function(){
 
      var $container = $('#container_box');
 
      $container.isotope({
        itemSelector : '.box_s,.box_m,.box_l,.box_xl',
		// options...
  transformsEnabled: false
      });
 
      $container.infinitescroll({
        navSelector  : '#page_nav',    // selector for the paged navigation 
        nextSelector : '#page_nav a',  // selector for the NEXT link (to page 2)
        itemSelector : '.box_s,.box_m,.box_l,.box_xl',     // selector for all items you'll retrieve
        loading: {
            finishedMsg: 'No more pages to load.',
            img: 'http://i.imgur.com/qkKy8.gif'
          }
        },
        // call Isotope as a callback
        function( newElements ) {
          $container.isotope( 'appended', $( newElements ) ); 
        }
      );
 
 
    });
  </script>

Y aurait-il une solution pour ne garder que l’effet de transition de déplacement de mes box ?
Et par contre, je ne trouve toujours pas de solution pour rendre compatible ce plug avec la version mobile de safari.
Je me permet de revenir vers vous car je ne suis pas un expert en javascript donc si quelqu’un peut m’aider, je ne dis pas non……….