title: Programmatically repeating a jQuery Tools Overlay
body: <p>I have another newbie question about jQuery tools (<a href="http://flowplayer.org/tools/overlay/index.html" rel="nofollow noreferrer">http://flowplayer.org/tools/overlay/index.html</a>). I have an overlay being triggered when an image is clicked, with code that looks relatively like this in the html body.</p>
  <pre><code>&lt;img id = &quot;shark&quot; src = &quot;http://static.guim.co.uk/sys-images/Education/Pix/picture
  s/2000/11/13/shark.jpg&quot; alt = &quot;click&quot; /&gt;
  
  &lt;div id = &quot;overlayFrame&quot;&gt;
      &lt;div id = &quot;overlayContent&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script type= &quot;text/javascript&quot;&gt;
      var clickable = document.getElementById('shark');
      clickable.onmousedown = ImageClick;
      
      function ImageClick(e)
      {
          console.log(&quot;image clicked&quot;);
          $(&quot;#overlayFrame&quot;).overlay
          ({
              mask: 'darkgrey',
              oneInstance: false,
              
              onBeforeLoad: function()
              {
                  var wrap = this.getOverlay().find(&quot;#overlayContent&quot;);
                  wrap.load(&quot;overlay.htm&quot;);
              },
              
              load: true
          });
      }
  &lt;/script&gt;
  </code></pre>
  <p>I want the overlay to come up every time the image is clicked. Right now, 'image clicked' prints to the console every time the image is clicked, but the overlay only happens the first time. How can I alter this code to make the overlay happen every time?</p>