title: Changing Twitter and Facebook share images on click
body: <h1>Where I'm at</h1>
  
  <ul>
  <li>I have a series of 30 slides and as you scroll down the page an anchor
  gets appended to the url (eg. #day1, #day2, #day3 ... #day30)</li>
  <li>I'm looking for a way to change the <code>meta name="twitter:image</code> and
  <code>meta property="og:image"</code> so when the user is on <code>slide/#day3</code> and the link
  gets clicked, the url is for corresponding day's image <code>day3.jpg</code></li>
  <li>I will be pulling the data for each of these slides from <code>data.js</code> which is in JSON format</li>
  </ul>
  
  <h2>scripts.js</h2>
  
  <pre><code>$('.twitter-slide').click(function() {
      $('meta[property="og:image"]').attr('content', 'linkToPicture');
  });
  </code></pre>
  
  <h2>data.js</h2>
  
  <pre><code>var data = [
   {
     "Day": 1,
     "Slide": "#day1",
     "Description": "Hungry by early afternoon. Thinking about all foods as either forbidden or compliant constantly.",
     "Extra": "",
     "Tweet": "Hungry by early afternoon.",
     "Background": "#ffffd9",
     "Font": "#111",
     "Image": ""
   },
   {
     "Day": 2,
     "Slide": "#day2",
     "Description": "Ate a whole avocado and truckful of nuts as late afternoon snack. Still feeling low key hungry.",
     "Extra": "",
     "Tweet": "Ate a whole avocado and truckful of nuts as late afternoon snack.",
     "Background": "#ffffd9",
     "Font": "#111",
     "Image": ""
   },
   {
     "Day": 3,
     "Slide": "#day3",
     "Description": "Have three water-based beverages at my desk: Ice water, hot water and water with lemon.",
     "Extra": "",
     "Tweet": "Have three water-based beverages at my desk: Ice water, hot water and water with lemon.",
     "Background": "#ffffd9",
     "Font": "#111",
     "Image": ""
   }
  ]
  </code></pre>