11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Voilà, j'ai trouvé un code très très pratique dans mon cas, mais je le trouve un peu bancal.
Il suffit de le tester, le voici :
http://jsfiddle.net/fgNMJ/145/

Comme vous le voyez, l'image 1 au clic se place d'abord au dessus de l'autre, pour ensuite déplacer le bloc.
J'aimerai l'améliorer de façon à ce que le bloc se déplace en même temps que l'agrandissement d'image, pour une animation plus fluide.
Le problème, c'est que je n'y connais rien en jquery a pars les bases et ce que je demande à l'air compliqué.
Cà vaut le coup, avec masonry, c'est très beau, mais pas encore çà..
Salut,

il faut que tu utilises "isAnimated: true" au lieux de "animated: true" (n'oublie pas la virgule sur le précédent paramètre).
Re,

Merci pour la réponse, çà m'a aider à comprendre que dans mon cas, il valait mieux utiliser le script Isotope, pour plus de fluidité.
Maintenant que j'utilise celui là, voilà où j'en suis :

http://jsfiddle.net/Eczn7/

J'aimerai pouvoir faire deux agrandissement différents.
Un qui s'agrandis sur la largeur de deux colonnes (comme sur l'exemple) et un autre sur trois (par exemple).
Merci d'avance pour vos conseils
Modifié par Oziris (24 Jan 2012 - 17:03)
Salut,
je ne suis pas allé chercher bien loin pour ce que je t'ai dit plus haut. J'ai juste lu la doc Smiley smile

Sinon pour ce que tu veux faire, c'est dans ton css que ça se passera et non pas dans le js.

Pour faire simple, le js que tu utilises dans le dernier liens ne fait que ajouter ou enlever une class. Or, cette class a des propriété css (et principalement de largeur) qui fait qu'elle grandit.
Si tu changes la taille en largeur de ".selected" alors tu changeras la taille de la div après un clic sur celle-ci.

En gros, et pour te donner une piste, ce qu'il te faudra faire c'est déclarer :
-une nouvelle class avec de nouvelles propriétés css,
-une nouvelle class qui te servira de sélecteur (comme par exemple : item-3-colonnes) dans l'html,
-copier coller le script js qui te permet d'ajouter et enlever une class (tout en spécifiant ta nouvelle class).

j'espère avoir été clair, si ce n'est pas le cas n'hésites pas à me le faire savoir.