jquery Isotope - faire défiler pour centrer le point a cliqué sur l'élément élargi

Question

Je suis nouveau ici, (et aucun codeur, je travaille en tant qu'architecte) mais au cours des derniers mois j'ai souvent parcouru cet endroit pour trouver des solutions à plusieurs problèmes que j'ai rencontrés en faisant un nouveau site web pour notre bureau d'architecture. Le site est déjà en ligne, mais j'ai toujours un problème que j'aime résoudre pour le faire fonctionner comme je le voudrais.

Dans le site j'ai utilisé jquery Isotope à plusieurs endroits et de différentes manières. mais pour notre section des nouvelles, j'ai utilisé isotope pour montrer les nouvelles disponibles. Les newsitems sont peuplés à partir d'un fichier xml, et lorsque vous cliquez sur l'image, le newsitem s'agrandit et des informations textuelles supplémentaires sont ajoutées, ainsi que des boutons image et plus. Étant donné que les éléments sont en cours d'agrandissement, il est nécessaire de réorganiser le raster et, fréquemment, les éléments de nouvelles disparaissent après la mise en page.

Pour résoudre ce problème, je veux faire défiler jusqu'à l'élément de destination et le recentrer. J'ai utilisé le plugin Jquery.ScrolTo d'Ariel Flesher pour résoudre ce problème (ce qui fonctionne très bien sur la partie portfolio de notre site). Le problème est que je n'arrive pas à trouver les coordonnées à faire défiler. Actuellement, j'utilise le haut de l'image utilisée comme espace réservé, et cela semble bien, mais quand je mets ma commande de défilement après la commande de repositionnement, elle continue de défiler jusqu'à l'ancien emplacement de l'image, pas à l'endroit après mise en page. Donc, en bref, ma question est, comment puis-je obtenir les nouvelles coordonnées après le relais, pour les fournir à la fonction de défilement?

//   change newsitem from small to big 
     $container.delegate('.element.crid_1 .img_container','click',function(){ 
      /* img src */    
      var ori = $('img', this).attr('src'); 
      if(ori != undefined){ 
       var string = $('img', this).attr('src'); 
       var bigpicture = string.truncate(-6) 
       $('img', this).attr('src',bigpicture +'01.jpg'); 
       $('img', this).attr('width',512); 
       $('img', this).attr('height',512); 
      } 
      $(this).parent().toggleClass('featured not_featured'); 
      txt_height = $(this).parent().find('.text').height();       
      new_height = manage_txt_heights(txt_height);  
      $(this).parent().find('.text').css({"height" : new_height + "px" }); 

      $container.isotope('reLayout'); 

      var imgoffset=$('img', this).offset().top ; 
      var calculation = '+='+imgoffset+'px'; 
      $('#nieuwswrapper').scrollTo(calculation,800); 
     }); 

code ci-dessus est ce que je l'utilise pour agrandir l'newsitem, après la commande re-mise en page, j'ai mis les lignes pour le comportement de défilement. où la valeur 800 est la vitesse de défilement.

La page Web entière « travail » est disponible ici website newssection

Merci à l'avance pour tout conseil. Jan

Answer 1

Vous pouvez activer ItemPositionData:

$('#container').isotope({ 
    itemSelector: '.element', 
    itemPositionDataEnabled: true 
}) 
// log position of each item 
.find('.element').each(function(){ 
    var position = $(this).data('isotope-item-position'); 
    console.log('item position is x: ' + position.x + ', y: ' + position.y ); 
}); 

http://isotope.metafizzy.co/docs/options.html#itempositiondataenabled