Comment obtenir le source de l'image de la première image avec JQuery?

Dans le code suivant, je veux que la première image s'affiche lors du chargement de la page, cependant, il ne veut pas montrer quoi que ce soit, et aucune erreur dans Firebug.

Comment puis-je obtenir cette ligne de travail:

$('img#main').attr('src', $('img:first').src);

Code Complet:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load('jquery', '1.5');
            google.setOnLoadCallback(function() {

                $('img.thm').css({opacity: 0.7});
                $('img#main').attr('src', $('img:first').src); //doesn't work

                $('img.thm').width(80).click(function() {
                    $('img#main').attr('src', this.src);
                });
                $('img.thm').mouseover(function() {
                    $(this).css({opacity: 1.0});
                });
                $('img.thm').mouseout(function() {
                    $(this).css({opacity: 0.7});
                });
            });
        </script>
        <style type="text/css">
            img.thm {
                cursor: hand;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="menu">
            <img class="thm" src="images/test1.png"/>
            <img class="thm" src="images/test2.png"/>
            <img class="thm" src="images/test3.png"/>
        </div>
        <div id="content">
            <img id="main"/>
        </div>
    </body>
</html>

OriginalL'auteur Edward Tanguay | 2011-03-09