Problem with Fancybox. Iframe works only for the first link on the site

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 al开发者_C百科l 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>

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.

what you are doing there is adding one fancybox to one entity with the id popup. if you want multiple <a> tags to have their own fancybox then you have to either do what you did for efery tag with a different id OR you give them the same class with different "rel".

see this example