jquery Isotope - 스크롤하여 가운데로 스크롤 클릭

Question

저는 여기에서 새삼 스럽습니다. (코더도없고, 건축가로도 일하고 ​​있습니다.) 지난 몇 달 동안 나는이 장소를 자주 찾아서 여러 문제에 대한 해결책을 찾았습니다. 우리의 건축 사무소를위한 새로운 웹 사이트를 만들었습니다. 사이트는 이미 온라인 상태이지만 여전히 원하는대로 작동하도록 해결하려는 문제가 있습니다.

사이트에서 나는 여러 장소에서 그리고 다른 방법으로 jquery Isotope를 사용했습니다. 그러나 우리의 뉴스 섹션에서는 사용할 수있는 뉴스 항목을 표시하기 위해 동위 원소를 사용했습니다. 뉴스 항목은 XML 파일에서 채워지며 이미지를 클릭하면 뉴스 항목이 확대되고 추가 텍스트 정보가 추가되고 이미지 버튼 등이 추가됩니다. 항목이 커지기 때문에 래스터를 다시 레이아웃해야하며 뉴스 레이아웃을 변경 한 후에 자주 뉴스 항목이 보이지 않게 이동합니다.

해당 문제를 해결하려면 대상 항목으로 스크롤하고 다시 초점을 맞추고 싶습니다. 나는 Ariel Flesher의 Jquery.ScrolTo 플러그인을 사용하여이 문제를 해결했습니다 (우리 사이트의 포트폴리오 부분에서 훌륭하게 작동하고 있습니다). 문제는 스크롤 할 좌표를 파악할 수 없다는 것입니다. 현재 사용 된 이미지의 윗부분을 자리 표시 자로 사용하고 있는데 문제가없는 것처럼 보입니다.하지만 다시 레이아웃 명령을 내릴 때 스크롤 명령을 설정할 때 이미지를 다시 배치 한 후에 이미지의 이전 위치로 스크롤합니다. 레이아웃.

짧은 내 질문에, 어떻게 내가 다시 조정 후 스크롤 기능을 제공하기 위해 새 좌표를 얻을 수 있습니까?

//   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); 
     }); 

위의 코드는 내가 뉴스 항목을 확대하는 데 사용하는 것으로, 다시 레이아웃 명령을 실행 한 후 스크롤 동작에 대한 줄을 넣었습니다. 여기서 값 800은 스크롤 속도입니다.

전체 '작업'웹 페이지가 어떤 조언을 사전에 website newssection

덕분에 여기에서 확인할 수 있습니다. 월은

Answer 1

당신은 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