Antoine1990 Il y a 2 mois Répondre
Bonjour et merci pour ce tutorial.
Pouvez-vous me dire comment remplacer les blocs par ses propres images ?
Merci d'avance !
29 commentaires
Ajouter un commentaire
Il y a 3 mois Répondre
bonjour à tous.
Tout d'abord un grand merci à toi grafikart pour ce super tuto super-utile.
Mais il se trouve que ma réalisation possède un petit problème :
certains bloc ne se réorganisent pas correctemment lorsqu'on les déplie. J'ai du mal à analyser d'où vient le problème mais il me semble que cela arrive généralement losqu'on essaye de déplier un bloc qui est à l'extrémité droite de l'ensemble des blocs.
Pour ceux qui veulent bien jeter un coup d'oeil, le site est disponible à l'adresse suivante : http://pluiedeballes.free.fr/cours.html
(ça ne bugue pas toujours, mais au bout d'un moment ...
merci d'avance pour toutes les réponses
evanp Il y a 3 mois - Répondre
après modification, c'est maintenant en bas que cela pose problème : par moment le bloc déplié passe par dessus le footer et ensuite toute la machine est déréglée !
nabilovic Il y a 3 mois Répondre
bsr un superb tuto je veut juste savoir si je mette mon index en html et pas en php pck je suis trope nul en php je doite faire quoi pour les filtre web dev 3D et pour les autre bloc d image jattend votre réponse bye et merci davance
Cristof Il y a 3 mois Répondre
Merci pour le tuto, est il possible d'y intégrer lightbox en plus ???
Arnaud Il y a 3 mois Répondre
bonjour,
j'ai un petit problème,
car j'ai des SECTION dans mon site dont une avec une gallerie masonry.
et comme masonry place tout les elements en absolute, je perd le flue de ma section et donc ma section n'a plus aucune hauteur...
comment puis-je faire..?
ma section est mise en >> position: relative;
merci d'avance
vald Il y a 3 mois Répondre
Bonjour Graphikart,
j'aurai aimé savoir si ce plugin peut fonctionner avec des vidéos?
on aurai les images en miniature puis la vidéo a l'agrandissement donc.
J'en profite pour te remercier, ton travail est de qualité et grâce à des gens comme toi j'ai pu apprendre bcp cette année.
pierrot Il y a 4 mois Répondre
Super tuto! merci
jm.ch73 Il y a 4 mois Répondre
Pour qui çà ne marche pas voila ceci a mettre dans main.js
portfolio.masonry({
itemSelector : '.bloc:not(.hidden)',
isAnimated: true,
columnWidth: 100
});
pour moi ça fonctionne sous IE9, firefox, safari, opera mais pas
essayer avec chrome
cortexfloun Il y a 4 mois Répondre
Bonjour,
Et merci pour ce bel aménagement du plugin masonry.
En effet la démo est chaotique avec des images qui se superposent. Je pense avoir trouvé d’où cela provient et donc je me permet d'apporter ma petite pierre a l'édifice.
Il y a une div #3d qui sert de sélecteur en créant une classe .3d dans le javascript.
Or, un nom de div ne doit jamais commencer par un chiffre. Remplacez 3d par img3d par exemple et vous verrez que cela marche beaucoup mieux.
cortexfloun Il y a 4 mois
Non, même si je persiste a dire qu'il ne faut pas utiliser de Id et Classes commençant par un chiffre, cela n'a en fait aucunement réglé le problème rencontré sur la démo.
L'auteur pourrait il se re-pencher un peu sur son script pour supprimer les quelques bugs restant? ... C'est un plugin intéressant mais malheureusement non utilisable en l'état.
Merci par avance!
Grafikart Il y a 4 mois - Répondre
Le problème ne vient pas de là mais du fadeOut/fadeIn lancé avant le reload de masonry. J'ai mis à jour les sources/demo.
romuhica Il y a 4 mois Répondre
Salut !
Tout d'abord, merci pour le tuto, comme tout le monde ici. J'ai une question sur un problème que je n'arrive pas à résoudre. J'utilise une base de données (car backoffice), et je ne sais pas comment relier mes différents projets à leur catégories. Je suis perdu.
Pourrais tu m'aider ne serait-ce que pour comprendre comment monter mes tables ?
J'ai déjà une piste, en créant une table pour les catégories (et elles sont affichées dans ma page), une autre pour les projets (avec miniature et description) et enfin les chemins sources des grandes images par type de projet. Suis-je dans l'erreur. J'ai l'impression de ne pas être très loin de la solution...
Tu peux me mp si tu le souhaites.
Merci encore en tout cas !
hd-fred Il y a 4 mois Répondre
Bonjour et merci pour le tuto
y a un truc qui m'échappe. je ne comprends pas comment avoir des images différentes.
dans le tuto c'est le lien "<img src="http://placehold.it/150x100 " alt="" width="150" height="100">" qui est répété 30 fois avec le "for ($i=0; $i < 30;".
pouvez vous m'orienter svp, je su
hd-fred Il y a 4 mois
Bonjour, je n'ai toujours pas compris comment avoir mes miniatures. je suis certain que c'est simple mais je cale. Y a personne pour m'aider svp ?
bonne journée
Valentine Il y a 4 mois - Répondre
Bonjour,
Vous devez créer une série respectant un format.
EXEMPLE:
i_0.png
i_1.png
i_2.png
....
pour les miniatures:
i150_0.png
i150_1.png
....
Vous mettez ces images dans votre répertoire image puis il faut modifier le chemin dans votre fichier php (qui était nommé index dans l'exemple de ce tuto).
J'espère vous avoir aidé
bonne journée à tous
Johayeux Il y a 4 mois Répondre
Merci pour ce tuto ! Tombe bien je cherchais un truc dans ce style !
Moi Il y a 5 mois Répondre
Bonjour,
Tout d'abbord merci pour ce tuto cependant j'ai un problème.
Ma d'acceuil du portfolio m'affiche "( ! ) Parse error: syntax error, unexpected T_ENDFOREACH in C:\wamp\www\... on line 16".
VOICI mon code :
<?php $dossiers = array('Sorties', 'Famille', 'Ecole'); ?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" media="screen" href="galerie.css">
</head>
<body>
<div class="page-header">
<h1>Galerie | ALBUMS
<small>
<?php foreach ($dossiers as $v); ?>
<a href="#<?php echo $v;?>"><?php echo $v;?></a>
<?php endforeach; ?>
</small>
</h1>
</div>
<div id="portfolio">
<?php for($i=0; $i<30; $i++): ?>
<div class="bloc <?php echo $dossiers[$i%3]; ?>">
<img src="http://placehold.it/150x100 " alt="case vide" width="150" height="100"/>
</div>
<?php endfor;?>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
</body>
</html>
Merci pour votre aide
_abdoulsy Il y a 4 mois - Répondre
Si tu es toujours en manque d'aide (ce qui serait triste apres 12 jours),
dans ta ligne "<?php foreach ($dossiers as $v); ?>"
tu as mis un point virgule a la place d'un deux-points ":"
Voila, j'espere que ... (twitter) !
raphael Il y a 5 mois Répondre
Bonjour j'ai fait le tuto, super !!
Je rencontre par contre une petite difficulté. en mettant le body à 960 de large et mes images 150px de large. lorsque je cliques sur la quatrième en partant de la gauche j'ai un trou qui se forme à la place. Une idée ? http://www.trademark-dev.fr/galerie/
dede18 Il y a 5 mois - Répondre
Pareil pour moi, pour éviter ça j'ai fait des miniatures plus petites de façon à ce qu'il y ai 7 miniatures en largeur et que l'image agrandie prenne la place de 4 miniatures.
lee Il y a 5 mois Répondre
Merci pour ce super tuto. On pourrait en savoir plus sur la mise en place du système de carrousel ?
kamui.studio Il y a 3 mois - Répondre
+1
car j'essaye de le mettre en place sur mon carrousel, mais les 'slides' se placent les un en dessous des autres, dès lors que masonry leur est appliqué.
une idée ?
jponline Il y a 5 mois Répondre
Comment tu as fait le slider sur le portfolio tu avais commencé a l'expliquer mais apparemment tu l'as pas terminé !
n3o Il y a 5 mois Répondre
bonsoir effectivement si on clic sur le premier bloc ca bug .Sinon est-il possible d'utiliser ce plugin pour gérer les blocs sur un site web pour permettre l'alignement des blocs en cas de résolutions plus faible
Grafikart Il y a 5 mois
Ne pas hésiter si il y a problème de réorganisation à mettre columnWidth au niveau de masonry (j'ai mis à jour l'exemple et ça marche avec une columnWidth fixée à 160 (150 + 10 px de marge))
windcom.fr Il y a 5 mois - Répondre
dans le masonry.Js ?
jPeG Il y a 5 mois Répondre
Tres bon tuto.
Juste une question quand on est dans une categorie exemple #dev, comment remettre tout d'origine avec toutes les catégories (au clic d'un lien ) ?
Merci
jPeG Il y a 5 mois - Répondre
J'ai trouvé.
Un autre problème ce pose a moi. Quand j'ouvre ou actualise la page les différents blocs se superpose. Je pense que ca vient du faite que je n'ai pas mis de height. Mais si je veux le mettre dans wordpress la hauteur variera suivant la longueur de l'article. Est il possible de regler le problème?
dede18 Il y a 5 mois Répondre
Génial, effectivement il y a un problème si on met la largeur de la page à 960 px, quand on affiche la quatrième image ça laisse un trou qui n'est pas comblé par la cinquième.
jponline Il y a 5 mois Répondre
ya toujours le bug lorsqu'on clique sur le premier bloc !
Astor Il y a 5 mois Répondre
Bon tuto ! J'ai le meme problème au niveau de la premiere photo, du coup je suis allé voir sur ton site et ce problème n'apparait pas ! Comment as tu fais pour l'enlever ? Merci d'avance
Grafikart Il y a 5 mois
Ce bug semble venir des dimensions, je ferais un test dès mon retour de vacance.
Astor Il y a 5 mois
Merci beaucoup
jPeG Il y a 5 mois - Répondre
il faut rajouter la ligne la ' columnWidth : 100 ' apres animate: true, avec la valeur que l'on veut.
amoric69 Il y a 5 mois Répondre
Super tuto,
Est-il possible de l'adapter dans un wordpress ?
Grafikart Il y a 5 mois - Répondre
Oui tout à fait possible
Tokiaa Il y a 5 mois Répondre
Script très sympa bravo
Par contre petit bug sur la démo, quand on clique sur la 1ère miniature (en haut a gauche), toutes les miniatures se réorganisent sur une seule colonne (sur firefox/chrome).
ipodtouchpro44 Il y a 5 mois Répondre
Lol j'adore ce pléonasme magnifique, "Mon portfolio à moi" xD
yob Il y a 5 mois Répondre
Super tuto merci bcp
Nuteylla Il y a 5 mois Répondre
Je regarde, même si j'utilise pas encore jquery.
BlackDesign Il y a 5 mois Répondre
Merci Grafikart pour le tutoriel,
tu l'ai fait à la chaîne dit donc ^^
Encore merci.
MehdiByNight Il y a 5 mois Répondre
Super comme tuto
Juste un petit bémol, l'affichage dans la démo bug de temps à autre, les petites vignettes de "preview" se superposent à l'image sur laquelle on a cliqué.
Résultat on ne voit plus l'image mais seulement les petites vignettes
Sinon c'est parfait merci beaucoup =)
Grafikart Il y a 5 mois
J'ai corrigé le bug sur la démo et sur le code fournit, merci
Shoodey Il y a 5 mois - Répondre
Merci pour le tuto
Petit hic; Il y a toujours le petit bug évoqué dans le premier commentaire
Laisser un commentaire
mixmil Il y a 2 mois Répondre
Un gros merci ! super utile