Dynamically change image in facebook and in share fancybox button

Question

Goal:
I would like to have a share button in my fancybox that share the image that I am viewing with the correct image name in Facebook shareer. I would like the user to click on him on Facebook, and he proceed to open Fancybox with the correct image.

Problem:
I have a gallery with jQuery FancyBox ( http://fancyapps.com/fancybox/ ). I added a sharing button with the code that I find in this fiddle ( http://jsfiddle.net/G5TC3/ ). My share button works, but I get the meta file from the site, and I want to get the og image: the image I'm viewing.

$(".fancybox") .attr('rel', 'gallery') .fancybox({ beforeShow: function () { if (this.title) { // Add FaceBook like button this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>'; } }, helpers : { title : { type: 'inside' } } }); 

For a user who clicks on my link and appears on the opened Facybox with the correct image, I have no idea how to do this and if possible.

What i know:
I know that I must have a unique URL for each image, and I think I have one. ex from my site:
www.myURL.com/images/gallery/myimages_1.jpg
www.myURL.com/images/gallery/myimages_2.jpg

Is it correct?

I think I need to change "this.href" in the delimiter at the image url. Firstly, is this correct? And second (sorry, I'm new to javascript), how can I do this?

Hope someone can help me. Sorry for my English. I'm trying to write my best English :) If you need more information, please feel free to.

thanks

[EDIT]:

I am adding this script to the gallery page

 $(function() { $('.thumbs').click(function() { $tempImgName = $(this).attr('id'); $tempUrl = this.href + '/images/thumbs/' + $tempImgName; $meta = document.getElementById('facebook'); $meta.setAttribute("content",$tempUrl); }); }); 

So, when I click on thumbsnail (with .thumbs class), I get the image URL and I change the meta (with facebook id). It works, but I think Facebook checks the meta when the page loads, and how can I get Facebook to double-check my meta to share the good thumbs?

Answer 1

og: image cannot be modified by URL. You need to specify different URLs for different images.

For instance: -

www.myURL.com/?pic=img1

www.myURL.com/?pic=img2 etc.

And the server-side language (like php) can read the "pic" GET argument and modify og: image.