jquery - 「ファンシーボックスへの直接リンク」ですが、アドレスバーにURLがあります

Question

この投稿How to create a direct link to any fancybox boxを見て、なんとか実装できました。しかし、誰かが画像をクリックしても URL が変わらないことに気付きました。つまり、基本的に、スクリプトが行うことは、画像のリンクを人々に提供できるようにすることだけです。人々が自分の画像リンクをキャッチして共有したい場合はどうすればよいでしょうか? ユーザーがサイトをナビゲートするときに、アドレス バーにさまざまな画像の URL を表示することはできますか?

Answer 1

私が正しく理解している場合：

• 訪問者が画像をクリックすると、その画像がfancyboxにポップアップ表示されます。
• 訪問者がpage.html＃image01に移動すると、fancyboxにすでに表示されているimage01がページに読み込まれます。
• 訪問者がimage02をクリックしたときに、URLをpage.html＃image02に更新する必要があります。

その場合、画像をクリックしたときにURLハッシュフラグメントを設定できます。

location.hash  = "image02";

提供された例を使用して：

var thisHash = window.location.hash;
$(document).ready(function() {
    $('.thumbs').fancybox({
        prevEffect: 'fade',
        nextEffect: 'fade',
        closeBtn: true,
        arrows: true,
        nextClick: true,
        padding: 15,
        helpers: {
            thumbs: {
                width: 80,
                height: 80
            }
        },
        beforeShow: function() {
            var id = this.element.attr("id")
            if (id) {
                window.location.hash = id;
            }
        },
        beforeClose: function() {
            window.location.hash = "";
        }
    });

    if (thisHash) {
        $(thisHash).trigger('click');
    }
});

Answer 2

beforeShow: 関数() {
    var id = $(this.element).attr("href");

    if (id) {
        window.location.hash = id;
    }
}、
afterClose: 関数() {
    history.pushState("", document.title, window.location.pathname + window.location.search);
}、

Answer 3

私はグレッグのコードを使用しましたが、代わりにこれらのオプションを使用しました (グレッグの方法がうまくいかなかったため、別の方法で id を参照しました):

    onStart: function(selectedArray, selectedIndex, selectedOpts) { 
        var id = $(selectedArray[ selectedIndex ]).attr('id');

        if (id) {
            window.location.hash = id;
        }
    },
    onClosed: function() {
        window.location.hash = "";
    }