Proper way to run the following JQuery Script?

Question

I am using the FancyBox plugin and when the user clicks on a small image, a larger image pops up. I saw the code for doing it with 1 image, but not for 2, so I assumed the correct way was to just do the following, which I am curious if it is correct or not? Do you just put the statements element you want the fancybox to operate on right after each other.

<script type="text/javascript">
    $(document).ready(function() {
        $("a#link1").fancybox();
        $("a#link2").fancybox();
    });
</script>

Answer 1

Yes that looks good.

Answer 2

Yep it's correct to put code you want to run into ready block. You can use shorter syntax

<script type="text/javascript">
    $(function() {
        $("a#link1").fancybox();
        $("a#link2").fancybox(); 
    });
</script>

which does exactly the same.

Answer 3

If you plan on having several links you want this to happen with, you could just give them all a class of fancybox and then do:

$(function() {
    $('a.fancybox').fancybox();
});

This way whenever you have new links that should be fancy boxes you don't have to give them unique IDs and come back to the javascript to make sure they are being initiliazed. You can have more than 1 class per element so it also won't affect existing classes. Most of the time when you have sets of something it is wise to use classes so you can treat them as such when manipulating them with jQuery.