fancyapps / fancybox

jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.
http://fancyapps.com/
7.28k stars 1.78k forks source link

change "id" of fancybox slides #1407

Open seiyria opened 7 years ago

seiyria commented 7 years ago

right now, when I look at the url while using fancybox, I see page.html#galleryname-1, page.html#galleryname-2, etc. Can I change 1 and 2 to more meaningful selectors? I plan to have galleries linked to other galleries on different pages, but there's no way I can know the index beforehand. However, I do have shorthand names that would work, so I would have on page 1:

page.html#galleryname-map0 and it would have a link on it to page2.html#galleryname-map4 for example.

seltix5 commented 4 years ago

i hope this is implemented. just one day after implementing fancybox a visitor send me some links of images from a random list.... because the hash is sequencial the link is useless from a sharing point of view when the source changes order. i think the best option wold be to add a new attribute to specify the custom hash (for a ID or slug for example), if not specified just use the corresponding sequencial number as currently do =)

max3xyz commented 3 years ago

Hey guys. I've got a simple workaround, that works for me. Maybe it's useful for someone:

Add the data-unique-slug attribute to your element.

<a data-fancybox="gallery" data-unique-slug="id-{your.id}" > .. </a>

And initialize JS and disable the fb hash option:

$('[data-fancybox="gallery"]').fancybox({  

        // disable fb hash modul
        hash: false,

        beforeShow: function(instance, slide) {
            var uniqueSlug = slide.opts.$orig.attr("data-unique-slug");
            if (uniqueSlug) {
                window.location.hash = uniqueSlug;
            }
        },

        beforeClose: function() {
            history.replaceState(null, null, ' ');
        },

});

// open fancyBox from hash
function openBoxfromUrl() {

        var currentHash = window.location.hash;
               currentHash = currentHash.replace("#", "");

        if (currentHash !== "") {
            $("[data-unique-slug='" + currentHash + "']")
                .eq(0)
                .focus()
                .click();
        }

}
openBoxfromUrl();
fabiocaccamo commented 3 years ago

@maxhanauer it doesn't work correctly, when changing photo the hash doesn't update.