将拇指分配给fancybox的网址（图像） [英] Assigning thumb to fancybox's url (image)

问题描述

这是在直接链接之后到任何fancybox，但在地址栏中的URL。现在我设法为我的fancybox画廊的每个图像分配一个独特的URL，我想知道是否通过共享image＃1 url，它会导致正确的拇指，例如，在Facebook上。

我正在使用最新的fancybox和jquery版本。

这是Javascript：

  var thisHash = window.location.hash; 
 $（document）.ready（function（）{
 
 $（'。thumbs'）。fancybox（{
 prevEffect：'fade'，
 nextEffect： 'fade'，
 closeBtn：true，
箭头：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）.t装配工（点击）; 
} 
}）; 
  

这里是HTML：

 < a class =thumbsdata-fancybox-group =group1id =image1href =http://freeimagesarchive.com/data/media/206/1_black。 jpg>< img src =http://freeimagesarchive.com/data/media/206/1_black.jpg/>< / a> 
  

基本上，使用这段代码，当我打开图像时，url将成为例如www.mysite.com＃image1

如果我复制该地址并粘贴它，例如Facebook，显然不会有任何拇指分享。正确的拇指将是 http://freeimagesarchive.com/data/media/206/1_black .jpg ，但这个想法不是分享图片链接，而是fancybox的链接。

我希望自己清楚，对不起英语。 / p>

任何方式这样做？

解决方案

正确分享此图像，您需要为每个图像提供一个页面，并使用正确的打开图表元标记。这些必须是在静态文件中进行硬编码，或者由服务器端脚本动态生成。这些页面将是您在Facebook上分享的网址，以便他们的解析器可以阅读它们。

如果您希望最终用户看到Fancybox版本，当他们访问共享网址时，您可以使用Javascript代码重定向它们。

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?

解决方案

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.

这篇关于将拇指分配给fancybox的网址（图像）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！