Fancybox URL thumb assignment (image)

Question

This happens after “Direct link to any fancybox”, but with the URL in the address bar . Now that I was able to assign a unique URL for each image of my fancybox gallery, I was wondering if, by sharing, for example, image # 1, this would fix the right finger, for example, on Facebook.

I use the latest versions of fancybox and jquery.

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 an image, the URL will become, for example, www.mysite.com # image1

If I copy this address and paste it, for example Facebook, it is obvious that it will not give a thumb. The right finger will be http://freeimagesarchive.com/data/media/206/1_black.jpg , but the idea is not to share the image link, but with the fancybox link.

I hope I understand, sorry for the English.

How to do it?

Answer 1

If you want Facebook to share this image correctly, you need a page for each image, with corresponding Open Graph meta tags . They must be either hardcoded in static files or generated dynamically on a server side script. These pages will be the URLs you post to Facebook so their parser can read them.

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