How to change open graph meta tags to share custom content on social media?

I want to add some social media share buttons on my website. Using Open Graph meta tags would work for pages that represent one material (for instance a post on my website). But the problem is, I have a gallery page which contains multiple pictures, and I want to add share buttons for each picture. If I use Javascript to change the meta tags according to which picture the user wants to share, would--for instance--Facebook's Crawler catch the newly generated tags or the original tags when the page is loaded?

I don't want to use PHP to generate the meta tags because everything in the gallery is being handled in Javascript and I can't refresh the page every time user selects one of the pictures to be shown.

What is the successful approach to this problem?

This is an excellent question. I've been through this before and i know how awful this can be.

So, first you need to registrate a facebook App, into developers.facebook.com, to have you own app Secret and App ID.

Second, you need to init Facebook Javascript SDK

window.fbAsyncInit = function() {
    FB.init({
        appId: YOUR_APP_ID,
        channelUrl: YOUR_CHANNEL_URL,
        status: true,
        xfbml: true
    });
};

(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {
        return;
    }
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Third you need to create a function or a method that dynamically call FB UI (which is the dialog box that will appear ass the user click in the share button) with your image data.

function shareMyImage(data) {
    FB.ui(

      {
        method: 'feed',
        name: 'Facebook Dialogs',
        link: data.link,
        picture: data.image,
        caption: data.caption,
        description: data.description
      },
      function(response) {
        if (response && response.post_id) {
          alert('Post was published.');
        } else {
          alert('Post was not published.');
        }
      }
    );
} 

And last, but not least, you need to call your function

shareMyImage({
    link: 'http://link-to-your-page.com',
    image: 'http://link-to-your-page.com/your-image.jpg',
    caption: 'Reference info'
    description: 'Description to your image'
});

---

Dynamic Structure

Obviously, the above 'share info' have to be dynamic as well, so you can use data attributes to pass this info easily

<span class="button--share" data-link="THE LINK" data-image="THE IMAGE" data-caption="THE CAPTION" data-description="THE DESCRIPTION">Share</span>

So, you can use jQuery .data() to parse the info and directly run your method.

$('.button--share').on('click', function(){
    var data = $(this).data();
    shareMyImage(data);
})