私はここで新しいです（そしてコーダーではなく、私は建築家として働いています）が、過去数ヶ月間、私はこの場所を頻繁に閲覧して、建築事務所の新しいWebサイトを作成するときに遭遇したいくつかの問題の解決策を見つけました。このサイトはすでにオンラインになっていますが、私が望むように機能させるために解決したい問題がまだあります。
このサイトでは、jqueryIsotopeをさまざまな場所でさまざまな方法で使用しました。しかし、私たちのニュースセクションでは、同位体を使用して利用可能なニュースアイテムを表示しました。ニュースアイテムはxmlファイルから入力され、画像をクリックすると、ニュースアイテムが拡大され、画像ボタンなどのテキスト情報が追加されます。アイテムが拡大しているため、ラスターを再レイアウトする必要があり、ニュースアイテムは再レイアウト後に表示されなくなることがよくあります。
その問題を解決するために、目的のアイテムまでスクロールして、もう一度フォーカスします。私はこの問題を解決するためにArielFlesherのJquery.ScrolToプラグインを使用しました（これは私たちのサイトのポートフォリオ部分でうまく機能しています）。問題は、どの座標にスクロールするかがわからないことです。現在、使用している画像の上部をプレースホルダーとして使用していますが、それは問題ないようですが、re-layoutコマンドの後にスクロールコマンドを設定すると、再レイアウト後の場所ではなく、画像の古い場所にスクロールします。レイアウト。
要するに、私の質問は、relayout後に新しい座標を取得して、それらをスクロール機能に提供するにはどうすればよいですか？
// 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);
});
上記のコードは、ニュースアイテムを拡大するために使用するものです。re-layoutコマンドの後に、スクロール動作の行を配置しました。ここで、値800はスクロール速度です。
「動作中の」ウェブページ全体は、ここのウェブサイトニュースセクションで入手できます。
アドバイスを事前に感謝します。1月