Assigning thumb to fancybox's url (image)

问题

This comes after "Direct link to any fancybox", but with URL in address bar. Now that I managed to assign an unique url to each image of my fancybox gallery, I was wondering if by sharing e.g. image #1 url, it would outcome the correct thumb, for example, on Facebook.

I'm using the latest fancybox and jquery versions.

Here is the Javascript:

    var thisHash = window.location.hash;
    $(document).ready(function() {

        $('.thumbs').fancybox({
            prevEffect : 'fade',
            nextEffect : 'fade',
            closeBtn  : true,
            arrows    : true,
            nextClick : true,
            padding : 15,
            helpers : {
                title : {
                    type : 'inside'
                },
                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');
        }
    });

And here is the HTML:

<a class="thumbs" data-fancybox-group="group1" id="image1" href="http://freeimagesarchive.com/data/media/206/1_black.jpg"><img src="http://freeimagesarchive.com/data/media/206/1_black.jpg" /></a>

Basically, with this code, when I open the image, the url will become e.g. www.mysite.com#image1

If I copy that address and paste it on, for example Facebook, obviously it won't give any thumb to share. The correct thumb would be http://freeimagesarchive.com/data/media/206/1_black.jpg but the idea is not to share the image link, but the fancybox link.

I hope I made myself clear, sorry for the english.

Any way to do this?

回答1:

If you want Facebook to share this image properly, you need a page for each image, with the proper Open Graph meta tags on it. These will have to be either hard-coded in static files, or generated dynamically by a server-side script. These pages will be the URLs that you share on Facebook so their parser can read them.

If you want end users to see the Fancybox version, when they visit the shared URL, you can redirect them with Javascript code.

来源：https://stackoverflow.com/questions/12325674/assigning-thumb-to-fancyboxs-url-image

标签

jquery

facebook

fancybox

thumbnails