masonry ('reload')

Lotfi Berrahal
Javascript

Bonjour,

Je poste ce sujet car je n'ai pas vu de soucis identique aussi j'utilise masonry pour un genre de portfolio avec tri.
Bref mon soucis c'est que quand je fais disparaître mes éléments la fonction ne se recharge pas...
Voyez vous ce que je fais de mal?

var $container = $('#container');
$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector : '.item',
    columnWidth : 240,
    isAnimated: true
  });
});
/* tri avec masonry */ 
$('#all').click(function(){
  $('.wordpress,.plugin,.one-page').fadeIn('slow');
  $container.masonry( 'reload' );
});
$('#one-page').click(function(){
  $('.one-page').fadeIn('slow');
  $('.wordpress,.plugin').fadeOut('slow')
  $container.masonry( 'reload' );
});
$('#wordpress').click(function(){
  $('.wordpress').fadeIn('slow');
  $('.one-page,.plugin').fadeOut('slow');
  $container.masonry( 'reload' );
});
$('#plugin').click(function(){
  $('.plugin').fadeIn('slow');
  $('.wordpress,.one-page').fadeOut('slow');
  $container.masonry( 'reload' );
});

3 réponses

Grafikart
Réponse acceptée

Je te conseille de modifier ton itemSelector et de rajouter une classe sur les éléments qui restent visible. Sinon vu que tu fais un fadeOut au moment ou tu lance reload l'élément est encore visible du coup il ne doit rien bouger.

Lotfi Berrahal
Auteur

D'accord déjà merci à toi pour la réponse et je vais essayer ça.
Je comprend ici que je dois ajouter une classe au moment du click au élément visible aussi je vais leur ajouter la classe visible.
Jusqu'ici tout va bien !
Ensuite j'envoie le reload sur le sélecteur ?

comme ca : ?

$('#one-page').click(function(){
  $('.one-page').fadeIn('slow').removeClass('visible').addClass('visible').masonry( 'reload' );
  $('.wordpress,.plugin').fadeOut('slow').removeClass('visible');
});

Je met un removeClass parce que je donne aux éléments une class visible au démarrage (car c'est du coup mon item selector).
Je pense que je fais fausse route car ça ne marche pas mais je sèche un peu la... :/

Le soucis en direct ici si vous voulez...

Lotfi Berrahal
Auteur

j'ai suivi ton tutoriel du coup ça c'est très bien passé merci pour ces petits effet sympas !