JQuery Masonry

Ce plugin est un portage pour Spip du plugin jQuery Masonry de David DeSandro : http://masonry.desandro.com/

Principe

Ce plugin réorganise les blocs de votre page page d’après une grille (de manière verticale et horizontale) pour réduire au maximum les espaces vides entre les éléments qui apparaissent lorsqu’on applique la propriété float sur des blocs de hauteurs différentes.

Installation

Comme tous les autres plugins, cf. http://www.spip.net/fr_article3396.html

Le plugin nécessite le plugin Saisies et YAML (+ Bonux pour Spip 2.1).

Configuration

La page de configuration du plugin permet de choisir le nombre d’éléments à traiter dans le site, puis pour chaque élément de saisir :

  • la classe ou l’id du container sur lequel appliquer le script
  • la classe des « briques » à agencer
  • la largeur des colonnes
  • la marge autour des « briques »
  • ...

Discussion

9 discussions

  • 1

    Bonjour !
    Nouvelle question, ce pluging serra-til compatible pour spip 3.2 ?
    Actuellement, impossible de l’installer, dans l’administration de spip 3.2, quand je recherche le pluging, il ne le trouve pas.. et si je tente manuellement par ftp, il ne me l’affiche pas non plus.

    Des solutions à proposer ?
    Merci !

    • Même réponse que pour le passage à SPIP 3.2 : à tester en modifiant le paquet.xml pour étendre les bornes,

    Répondre à ce message

  • 3

    Bonjour,

    Une mise a jour du plugins pour spip 3.1 est-il envisagé ?

    Je l’utilise sur plusieurs sites, mais impossible pour le moment de migrer mes sites vers spip 3.1 a cause de ce plugins.

    Merci à vous

    • Bonjour Gaston,

      J’ai une solution - qui n’est peut-être pas des plus recommandables - mais qui a fonctionné pour moi : dans le fichier /pulgins/auto/jquery_masonry/paquet.xml, modifiez la ligne compatibilite=« [2.1.0 ;3.0.*] » par compatibilite=« [2.1.0 ;3.1.*] ».

      Le plugin devrait alors être réactivable.

      Bonne chance !

    • Ben : si lorsque tu as ainsi activé le plugin tu n’a pas vue de bug, c’est qu’il est compatible SPIP 3.1.

      Dans ce cas, peut tu me confirmer qu’il n’y a pas de bug et je marquerai le plugin comme compatible 3.1

    • Merci ben de la combine, j’ai pas encore testé,

      Pour le moment il est toujours en 3.0
      Des bugs sont-ils constatés ?

    Répondre à ce message

  • 3

    Bonjour, Me revoilà,

    Et j’ai toujours le même souci, avec Masonry et un site en rresponsive design.
    Je veux que le Masonry prenne toute la largeur de ma page, je l’appelle d’une class « mur » :

    .mur
    float:left ;width:100% ;display:inline ; height:auto ;position:relative ; padding:0 ;

    Ensuite je veux six colonnes, en laissant la hauteur libre.
    Dans formulaire dans l’espace privé je met « 0 » a marge et multii colonne.

    je divise donc 100 par 6 = 16,66667.

    Et met ma classe « brique » pour les vignettes comme tel :

    .brique
    position:relative ;float:left ; display:block ; width:16.6667% ;padding:0 ; height:auto ;margin:0 ;

    .brique img
    position:relative ;float:left ; display:block ; width:100% ;padding:0 ; height:auto ;margin:0 ;

    Et là je comprend pas, j’ai 5 colonnes, à cause des marges, j’ai beau analyser le code je comprend pas d’où elles sortent, bien que dans spip.css j’ai, et Masonry n’a pas de fichier css, ou je l’ai pas trouvé…. :

    .spip_logos float : center ; margin : 0 ; padding : 0 ; border : none ;

    Si je réduis mon pourcentage pour avoir six colonnes, quand je rétréci ma fenetre, cela passe a un moment a 5 collonnes, j’en deduis que les marges sont en pixels....

    Et ensuite il m’arrive régulièrement d’avoir le bug des images qui sont toute superposées…
    ce bug n’apparait pas si je choisi une largeur fixe en pixels.

    C’est étrange car sur un autre page, j’utilise des documents sans masonry, avec le meme code et j’ai bien mes six colonnes, pas de marges, et quand je réduis ma fenêtre cela reste en six colonnes…

    La page en question : http://latelier.web4me.fr/spip.php?article8&var_mode=recalcul

    Si quelqu’un comprend mon problème… je fournis une capture d’écran du bug

    • Alors en cherchan Masonry + image en responsive, je suis tombé là dessus : [http://osvaldas.info/responsive-jqu...->http://desandro.github.io/masonry/demos/fluid.html]

      J’ai pas tester la seconde solution, mais la première regle mon soucis de garder 6 colonnes qui prennent bien toute la largeur.

      Par contre comme je passe pas par le css, je sais pas comment je vais faire pour passer en 2 colonnes pour smartphone...

      Par contre j’ai toujours le bug qui apparait... il disparait si l’on bouge un peu la fenetre, personne n’a ce bug ça fait longtemps que je cherche...?

    • Je continue mon enquête…

      en tapant dans google, « Masonry bug picture », je suis tomber là fessus, qui est exactement mon problème :

      https://github.com/desandro/masonry...

      Donc, si je résume, les images se superposent, parce que quand la largeur est en pourcentage et la hauteur en auto, masonry organise les images avant même de savoir la hauteur, en gros il se charge plus /trop vite.

      Mes capacités a comprendre tout ça sont réduite, mais j’en déduis, qu’il faut soit ralentir le time out, que je comprend par ralentir Masonry, pour attendre que les images se chargent…

      this.resizeTimeout = setTimeout( delayed, 100 );

      Et mettre 200 ms au lieu de 100 ms, J’ai cherché dans le fichier
      jquerymasonry/v0.4.2/javascript/jquery.masonry.js, ligne 41 :

      if ( resizeTimeout ) { clearTimeout( resizeTimeout ); }
            resizeTimeout = setTimeout(function() {
              jQuery.event.handle.apply( context, args );
            }, execAsap === "execAsap"? 0 : 100 );
          }
        };

      C’est ce qui se ressemble le plus, en modifiant 100 par 500 cela change rien…
      J’avais vu aussi qu’il faudrait charger masonry après le chargement des images, en bas du code, mais là je crois pas que c’est possible avec un pluging spip…

      Si quelqu’un a une idée, je suis preneur car je sent que je vais jamais réussir avec mes moyens…

    • Bon alors, concernant le bug,

      Si j’ai bien compris, il fallait rajouter une fonction image.loaded pour régler le problème, n’y connaissant rien , j’ai testé plusieurs chose et je suis tombé sur ce code :

      <script>
      $(function(){
       
          var $container = $('#mur');
          $container.imagesLoaded( function() {
              $container.masonry();
          });
       
       
      });
       
      </script>

      Je le place dans le head de ma page concernée et, il semblerait que le bug disparait, mes images dans un premier temps « bug », puis se placent correctement ( je l’ai vu sur un ordi ayant un faible connexion…)

      J’ai pas assez de recul pour savoir si c’est vraiment bon.

      Et rappel :

      Donc pour bien avoir six colonnes avec une largeur en % et hieght en auto, il faut placer en bas juste avant le body, (par contre pour smartphone je vais être embêter si je veux repasser en 1 colonne….) ceci :

      <script>
      $('#mur').masonry({
        itemSelector: '.brique',
        // set columnWidth a fraction of the container width
        columnWidth: function( containerWidth ) {
          return containerWidth / 6;
        }
      });
      </script> 

    Répondre à ce message

  • 3

    Bonjour,
    Et un grand merci pour se pluging qui permet de faire des sites en responsive assez rapidement.
    Cependant j’ai un petit bug avec se pluging, il marche nickel sur écran ordi, mais sur smartphone quand j’arrive pour la première fois sur ma rubrique, tout mes logos articles sont superposés, il faut que j’actualise ma page pour que ça remarche...

    Et a vrai dire je sais pas si c’est un bug du pluging ou mon css qui pose problème

    Bref si quelqu’un à un problème similaire...

    J’utilise spip3

    • Salut, est-ce que le bug est aussi observable sur le site de démo du script original ?

      http://masonry.desandro.com/

      ++

    • Salut b_b,
      alors non, j’ai pas l’impression que il y a ce bug, je précise que sur écran je suis en plusieurs colonnes et sur smartphone je suis a 100% de width height:auto, donc une seul colonne. Une fois la page actualisé le bug disparait. J’avais plaçé un png transparent par dessus pour protéger un minimum les images je vais voir si c’est ça ...

    • Bonjour,

      Après tout ce temps j’ai pas réussis à résoudre ce bug ...

      Je l’utilise avec des logo_articles, comme ma hauteur est en auto, j’ai l’impréssion que masonry ne prend pas en compte le logo.

      Un liens en question :
      http://sitederecherches.web4me.fr/spip.php?rubrique1
      si vous avez des smartphone (j’en ai pas je test sur un ipod ou sur des smartphone à des amis) merci de me dire si le bug apparait et si chez vous non pourquoi ?

    Répondre à ce message

  • 2

    bonjour,

    est est-ce que quelq’un pourrait expliquer comment paramétrer ce plug in avec un exemple facile :
    le formulaire plugin - le code html et le css correspondant ?
    (en gros qu’est ce qui appelle quoi ?)

    merci d’avance.

    • Salut, je tente de prendre le relais sur le support des contribs d’Yffic. Par contre je ne vais pas t’être d’une grande aide sur ce plugin que je ne connais pas encore.

      Pour faire simple, le plugin s’occupe d’intégrer le script jQuery Masonry et de propsoer une interface de configuration pour spécifier les variables d’appel du script. Du coup, la doc du script sur le site de l’auteur devrait t’être utile pour commencer :

      http://masonry.desandro.com/docs/intro.html

      Si d’autres personnes qui utilisent le plugin peuvent apporter plus d’infos qu’elles n’hésitent pas.

    • c’est bon, j’ai trouvé en bidouillant comment ça marchait……

      enfin je crois.
      merci.

    Répondre à ce message

  • bonjour existe ’il un « pas à pas » pour configurer le plugin et le html correspondant . Je n’arrive pas à appliquer cette réorganisation à ma pge web....

    est-ce de mauvais identification div ? class ?
    je rame un peu………

    Répondre à ce message

  • 3

    Je viens de charger mon site du localhost au serveur pour tester. J’avais fait la mise à jour de spip par dessus l’ancienne avec spip_loader.

    Là le plugin ’itérateurs" ne marche plus avec l’ancienne version masonryet là le nouveau masonry m’indique à la page / ?exec=configurer_jquerymasonry :
    Fatal error : Call to undefined function : yaml_decode_file() in /homez.52/.../.../plugins/saisies/inc/saisies_lister.php on line 288

    plugin saisie : 1.23.1 & bonux : 2.3.0
    Le dossier fonds est supprimé aussi. Désolé mais c’est un peu le flou maintenant !!!

    • On va y arriver... Installe YAML qui est parfois nécessaire pour certaines saisies

    • Ca marche après installation de YAML !!!
      Petite erreur de code cependant à la première config (voir image ci-jointe) mais après c’est disparu !!
      En tout cas, magnifique... Merci pour la solution !
      Il faudrait peut-être indiquer dans l’article de télécharger YAML avec BONUX et SAISIES, au cas ou quelqu’un rencontre le même problème.
      Merci Yffic !!!!

    • OK, je vais rajouter le necessite de YAML

      Pour le warning, ca vient peut être de ta version php. En effet array_intersect_key n’existe qu’à partir de la version 5.1 : http://php.net/manual/fr/function.array-intersect-key.php

    Répondre à ce message

  • 5

    Le plugin ne marchait pas avec mon spip, impossible de configurer le Masonry.
    Je suis donc retourné à la version antérieure auquelle on doit ajouter le plugin « itérateurs » et configurer avec « CFG » .

    Tout marche nickel maintenant.

    L’archive et les fichiers à récupérer et à mettre avec les plugins sont ici :
    http://zone.spip.org/trac/spip-zone/changeset?old=50417%40_plugins_%2Fjquery_masonry&new=50417%40_plugins_%2Fjquery_masonry

    • Hello

      Tu peux en dire plus ? Histoire de corriger ce qui ne va pas...

    • En fait, avec le plugin ci-dessus, la page pour configurer masonry dans l’admin est blanche avec juste marquée en haut « Configurer jQuery Masonry ».
      Je pensais que c’était la version de « saisie » ou de « bonux » mais non apparemment. Ma version de Spip est : SPIP 2.1.11.
      Avec la version antérieure tout est configurable depuis « CFG » sans problèmes.

    • Hello

      Je viens de tester sur un spip tout neuf svn avec les plugins à jour... Pas de problème. Vide ton dossier tmp pour voir ?

    • J’ai fait aussi la mise à jour avec la 2.1.12 et j’ai vidé le dossier tmp mais toujours rien, page blanche pour configurer « masonry » en 0.3.1.
      Il doit y avoir conflit avec un plugin. Pas grave, je continue avec la version 0.1 qui marche bien avec l’ajout d’« itérateurs »..

    • Une petite idée : as tu mis à jour la nouvelle version par dessus l’ancienne ? (le dossier fond est-il bien supprimé ?). Est-ce que la page de config est ?exec=configurer_sjcycle ou exec=config_sjcycle ?

    Répondre à ce message

  • Cool

    J’avais utilisé ce script pour un site il y a quelques mois. Mais sans en faire un plugin. Le prochain site l’utilisant sera plus simple maintenant. :)

    Super travail.

    http://reunion-village.com

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom

Dernière modification de cette page le 25 octobre 2017