JQuery Tools Overlay and Link

I am having some trouble with the JQuery Tools Overlay. In my scenario, I have an image which is linked to a PDF file for download via a "_blank" target. When the user clicks on the link, I want the link to launch AND I also want the .overlay() to be called. It seems that the .overlay() is called, but the link is never executed. Anyone know how to get the desired behavior?

Here's my image:

<a target='_blank' href='log.server.php?sid=26'><img class='options-img' rel='#img-transcript' src='images/pdf_icon.png' alt='Download Transcript' title='Download Transcript'/></a>

Here's my call to the overlay:

$(function() {
    $("img[rel]").overlay();
});

And finally the overlay:

<div class="overlay" id="img-transcript">
  <img src="about.png" style="float:left; margin:0 15px 20px 0" />
  <table style="margin:0">
    <tr>
      <div class="label">Success!</div>
      <div class="message">Your transcript has been downloaded. See downloads to view.</div>
    </tr>
  </table>
</div>

Solution

I have a feeling jQuery tools is preventing the default action of the link when you use it this way.

I found that refactoring your code slightly makes it work:

$("#img-transcript").overlay({
    load: false // don't initially load the dialog
});

/* Load the overlay on click: */
$("a").on("click", function () {
    $("#img-transcript").data("overlay").load();
});

Example: http://jsfiddle.net/h5NHk/ (Sorry for all the cats)