Fancy Box to Popup an HTML Page from One List Item in an Unordered List

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.

score 1 · Answer 1 · answered Oct 04 '12 at 03:34

Binding fancybox to anchors <a> is the normal (and optimal) way to use it so this

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

... is perfectly fine.

Now, since you are opening an external page (popup.html) you may need to set the type of content to iframe ... and eventually assign some dimensions so try

<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,
        type            : "iframe",
        width           : 640, // or whatever
        height          : 320
    });
});
</script>

On the other hand, considering that you may want to open the other html files in fancybox too, then use classes instead of IDs and add the same class to all anchors, so

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

and change the selector in your jQuery code like

$(".fancy_popup").fancybox( ..... )

so you can use the same script for multiple elements.

This answer is a good thought. And I will definitely try it. But the confusing part is that I'm basically using the same code for this page: http://www.pacmass.org/test-deploy/calendar/ If you click the link, Click for Instructions, this isn't an iFrame and yet it still works. Weird... — nicorellius, Oct 04 '12 at 17:50
I should clarify, the link I mentioned above is actually using a `
`, and this is what I originally tried first, before the anchor attachment. I came to the conclusion that the anchor was the most efficient way to do it (I hope it still is ;-). — nicorellius, Oct 04 '12 at 18:06

score 1 · Answer 2 · edited Oct 04 '12 at 17:51

HTML CODE

<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>

JQUERY CODE

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

that solution will require TWO clicks to fire fancybox because `$(this).fancybox()` is just binding fancybox to the parent selector `#fancy_popup` on first click but not launching it. — JFK, Oct 04 '12 at 17:10

score 0 · Accepted Answer · edited May 23 '17 at 11:56

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!

Fancy Box to Popup an HTML Page from One List Item in an Unordered List

3 Answers3