Question

I am testing Fancybox for Iframes and I noticed that on my WordPress blog (and I guess everywhere else) the iframe is opened only for the first link on my home page.
I have added the id attribute to all of the links though.

Any ideas why is that and how to correct it?
Below is the code. I only changed the name to popup and set to all links id=”popup”. On the examples page it also uses id, but on one link only.

<script type="text/javascript">
    $(document).ready(function() {
        $("#popup").fancybox({
            'width'             : '75%',
            'height'            : '75%',
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'iframe'
        });
    });
</script>

Answer 1

IDs must be unique. If your existing code is something like

<a href="whatever" id="popup">Link 1</a>
<a href="whateverelse" id="popup">Link 2</a>

Change it instead to be

<a href="whatever" class="popup">Link 1</a>
<a href="whateverelse" class="popup">Link 2</a>

Then, adjust your Javascript to be

<script type="text/javascript">
    $(document).ready(function() {
        $("a.popup").fancybox({
            'width'             : '75%',
            'height'            : '75%',
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'iframe'
        });
    });
</script>

The reason why using the code from their documentation isn’t working for you is because their documentation is dealing with a single link only, not a group of links.