Programmatically repeating a jQuery Tools Overlay

I have another newbie question about jQuery tools (http://flowplayer.org/tools/overlay/index.h开发者_JAVA百科tml). I have an overlay being triggered when an image is clicked, with code that looks relatively like this in the html body.

<img id = "shark" src = "http://static.guim.co.uk/sys-images/Education/Pix/picture
s/2000/11/13/shark.jpg" alt = "click" />

<div id = "overlayFrame">
    <div id = "overlayContent"></div>
</div>

<script type= "text/javascript">
    var clickable = document.getElementById('shark');
    clickable.onmousedown = ImageClick;
    
    function ImageClick(e)
    {
        console.log("image clicked");
        $("#overlayFrame").overlay
        ({
            mask: 'darkgrey',
            oneInstance: false,
            
            onBeforeLoad: function()
            {
                var wrap = this.getOverlay().find("#overlayContent");
                wrap.load("overlay.htm");
            },
            
            load: true
        });
    }
</script>

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?

---

I haven't tested your specific code, but I solved the same problem of being able to programatically repeat the load by calling overlay().load() each time. I think this will work for you. See the last line below:

<script type= "text/javascript">
var clickable = document.getElementById('shark');
clickable.onmousedown = ImageClick;

function ImageClick(e)
{
    console.log("image clicked");
    $("#overlayFrame").overlay
    ({
        mask: 'darkgrey',
        oneInstance: false,

        onBeforeLoad: function()
        {
            var wrap = this.getOverlay().find("#overlayContent");
            wrap.load("overlay.htm");
        },

        load: true
    }).load(); // This is the only code I added
}
</script>