“Direct link to any fancybox”, but with URL in address bar

Question

I took a look at this post How to create a direct link to any fancybox box and I managed to implement it. However, I noticed that whenever someone clicks an image, the URL doesn't change. So, basically, all the script does is to allow me to give the link of the image to people. What if people want to catch the image links for themselves and share them? Is it possible to also show the different image urls in the address bar as people navigate the site?

Answer 1

If I understand correctly:

• When a visitor clicks on an image, the image pops up in fancybox.
• When a visitor navigates to page.html#image01, the page loads with image01 already shown in fancybox.
• You want the url to update to page.html#image02 when a visitor clicks on image02.

In that case, you can set the url hash fragment when the image is clicked.

location.hash  = "image02";

Using your supplied example:

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

I used Greg's code but I used these options instead (and referenced id in a different way because Greg's way wasn't working for me):

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

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

Answer 3

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

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