I have an unordered list:

<ul>
    <li><a id="fancy_popup" href="popup.html" class="fancybox">
        Popup HTML Link</a></li>
    <li><a href="other.html">Other HTML Link</a></li>
    <li><a href="other.html">Other HTML Link</a></li>
</ul>

And I have a jQuery script:

<script type="text/javascript">
$(document).ready(function() {
    $("#fancy_popup").fancybox({
        transitionIn    : 'elastic',
        transitionOut   : 'elastic',
        easingIn        : 'easeInSine',
        easingOut       : 'easeOutSine',
        speedIn         : 400,
        speedOut        : 200,
        titlePosition   : 'inside', 
        titleFormat     : 'document.write("Fancy Box Title");',
        cyclic          : true
    });
});
</script>

This jQuery Fancy Box script works elsewhere, with a div that has the id="fancy_popup" so I thought why not add it to the anchor directly in this case... I'm trying to figure out how to apply Fancy Box so that when someone clicks the Popup HTML link above, a Fancy Box window pops up, according to the script.

I've tried variations with placing the id on the li, on the ul and manipulating the script for these selectors to no avail. Any help is appreciated.