SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 284 visiteurs en ce moment

Accueil > Squelettes > Outils pour squelettes > JQuery Masonry > JQuery Masonry

JQuery Masonry

15 août 2011 – par b_b, Yffic – 27 commentaires

15 votes

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 »
  • ...

Voir en ligne : http://plugins.spip.net/jquerymasonry

Dernière modification de cette page le 15 novembre 2012

Retour en haut de la page

Vos commentaires

  • Le 9 janvier à 17:56, par gaston En réponse à : JQuery Masonry

    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

    • Le 25 juillet à 17:40, par ben En réponse à : JQuery Masonry

      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 !

    • Le 26 juillet à 14:13, par Maïeul En réponse à : JQuery Masonry

      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

    • Le 24 septembre à 01:25, par gaston En réponse à : JQuery Masonry

      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

  • Le 11 septembre 2015 à 12:57, par gaston En réponse à : JQuery Masonry

    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

    PNG - 311.5 ko
    • Le 12 septembre 2015 à 12:27, par gaston En réponse à : JQuery Masonry

      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...?

    • Le 13 septembre 2015 à 12:10, par gaston En réponse à : JQuery Masonry

      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…

      1. 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 :

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

      Télécharger

      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…

    • Le 13 septembre 2015 à 13:47, par gaston En réponse à : JQuery Masonry

      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 :

      1. <script>
      2. $(function(){
      3.  
      4. var $container = $('#mur');
      5. $container.imagesLoaded( function() {
      6. $container.masonry();
      7. });
      8.  
      9.  
      10. });
      11.  
      12. </script>

      Télécharger

      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 :

      1. <script>
      2. $('#mur').masonry({
      3. itemSelector: '.brique',
      4. // set columnWidth a fraction of the container width
      5. columnWidth: function( containerWidth ) {
      6. return containerWidth / 6;
      7. }
      8. });
      9. </script>

      Télécharger

    Répondre à ce message

  • Le 24 avril 2013 à 20:41, par gaston En réponse à : JQuery Masonry

    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

    • Le 24 avril 2013 à 20:42, par b_b En réponse à : JQuery Masonry

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

      http://masonry.desandro.com/

      ++

    • Le 24 avril 2013 à 23:11, par gaston En réponse à : JQuery Masonry

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

    • Le 17 juin 2013 à 19:42, par gaston En réponse à : JQuery Masonry

      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

  • Le 15 novembre 2012 à 12:41, par caillou En réponse à : JQuery Masonry

    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.

    • Le 15 novembre 2012 à 15:17, par b_b En réponse à : JQuery Masonry

      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.

    • Le 15 novembre 2012 à 22:46, par caillou En réponse à : JQuery Masonry

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

      enfin je crois.
      merci.

    Répondre à ce message

  • Le 15 novembre 2012 à 12:25, par caillou En réponse à : JQuery Masonry

    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

  • Le 6 février 2012 à 23:47, par mickamoi En réponse à : JQuery Masonry

    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 !!!

    • Le 7 février 2012 à 09:16, par Yffic En réponse à : JQuery Masonry

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

    • Le 7 février 2012 à 17:51, par mickamoi En réponse à : JQuery Masonry

      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 !!!!

      PNG - 176.6 ko
    • Le 7 février 2012 à 19:06, par Yffic En réponse à : JQuery Masonry

      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

  • Le 29 janvier 2012 à 17:03, par mickamoi En réponse à : JQuery Masonry

    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

    • Le 29 janvier 2012 à 17:53, par Yffic En réponse à : JQuery Masonry

      Hello

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

    • Le 29 janvier 2012 à 22:03, par mickamoi En réponse à : JQuery Masonry

      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.

    • Le 30 janvier 2012 à 09:47, par Yffic En réponse à : JQuery Masonry

      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 ?

    • Le 3 février 2012 à 13:06, par mickamoi En réponse à : JQuery Masonry

      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 »..

    • Le 3 février 2012 à 17:52, par Yffic En réponse à : JQuery Masonry

      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

  • Le 20 août 2011 à 16:15, par gilles En réponse à : JQuery Masonry

    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

Répondre à cet article

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Mailsubscribers

    16 janvier 2013 – 274 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes (...)

  • noiZetier v2

    9 novembre 2012 – 36 commentaires

    Le noiZetier offre une interface d’administration permettant d’insérer au choix des éléments modulaires de squelettes (noisettes) et de les ajouter ainsi à ses squelettes. Compatibilité La version 2 du noizetier fonctionne sous SPIP 3. Elle est (...)

  • cirr : plugin « rédacteur restreint »

    29 octobre 2010 – 60 commentaires

    Ce plugin « cirr : rédacteur restreint » permet d’affecter des rubriques aux rédacteurs et modifie les droits afin qu’un rédacteur restreint (ou un administrateur restreint) voit dans l’espace privé uniquement les rubriques qui lui sont affectées (et leur (...)

  • Un retour d’expérience d’utilisation de Formidable

    26 octobre – commentaires

    Il s’agissait de créer un formulaire d’inscription à un évènement modérer les inscriptions dans le privé publier les inscriptions dans le public Nous avons discuté de cette présentation lors de l’apéro SPIP du 15 février 2016 à la Cantine (...)

  • Métas +

    3 décembre – 14 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

Ça spipe par là