0

現在、サムネイルのギャラリーがあり、クリックするとモーダルウィンドウがアニメーション化され、ajaxを介してコンテンツが読み込まれます。'window.location.hash'を使用して、モーダルにロードされるコンテンツの一意のURLを作成しました。

var base_url = "http://www.ddbremedy.co.uk/siteupdate/";

$('#work_gallery li a').on('click', function(event) {

    event.preventDefault();
    postLink = $(this).attr('href');
    window.location.hash = postLink.replace(base_url, "");
});

次に、モーダルがアニメーション化され、コンテンツがajaxを介して読み込まれます。次に、モーダルを閉じるときに、このコードを追加して、ajaxページがロードされたときに追加されたハッシュとURLのサフィックスを削除します。

if ("pushState" in history) {
    history.pushState("", document.title, window.location.pathname);
} else {
    window.location.hash = "";
}

これはすべて正常に機能しますが、必要なのは、生成されたajaxリンクを取得し、新しいウィンドウに貼り付けると、正しいサムネイルでクリックイベントを自動的にトリガーして、正しいコンテンツをロードできるようにすることです。私は基本的に次のようなURLにハッシュと特定の単語があるかどうかを検出できることを知っています：

var pathname = window.location.hash;
if (pathname.indexOf("work") >= 0) {
    // trigger click event on correct thumbnail to launch modal   
}

私はおそらく次のようなクリックイベントをトリガーする必要があることを知っています：

$('#work_gallery li a').trigger('click');

しかし、ajaxコンテンツのURLに基​​づいて正しいサムネイルに適用する方法がわかりません。モーダル自体は、プラグインなしでjqueryを使用して実行されます。また、そのように維持する必要があります。どんな助けでも大歓迎です。

よろしくお願いします。

4

1 に答える 1

1

それを機能させることができました。@BenMは私を正しい方向に向けました。これは私がそれをした方法です：

まず、URLをチェックしてハッシュが含まれているかどうかを確認する「checkUrl」という関数を実行します。

checkUrl = function() {
    if (window.location.hash) {

    }
};

checkUrl();

次に、ifステートメント内で、ハッシュパスを変数に格納し、ハッシュから分割します。次に、ハッシュの後の文字列を変数に格納します。

var pathname = window.location.hash,
    rez = pathname.split('#'),
    linkUrl = rez[1];

次に、その変数をその特定のhrefを持つリンクのセレクターとして渡し、対応するリンクでクリックイベントをトリガーします。これにより、正しいモーダルがアニメーション化されて読み込まれます。

$("a[href='http://www.ddbremedy.co.uk/siteupdate/" + linkUrl + "']").trigger('click');

うまくいけば、これは将来誰かを助けるでしょう。

于 2013-03-26T11:02:48.290 に答える