Question

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.

Answer 1

First off, let me thank the answer above, as they really helped me understand better how this darn FancyBox works. I knew it had to work, somehow, so what I did in this case was to go back to the basics and use a simple gallery approach.

I read other posts here, also, namely:

can't get fancybox helper buttons to show

and

fancybox – d.onCleanup is not a function

and realized also that I hadn’t include the CSS file in the right place. Stupid mistake, actually. In this case, I was creating a few different files, and I had the CSS included in the wrong file in the chain of files, and my brain told me it was taken care of but it wasn’t.

Thanks again!