How to get image source of first image with JQuery?
<p>In the following code, I want the first image to be displayed when the page loads, however, it doesn't show anything, and no error in Firebug.</p>

<p>How can I get this line to work:</p>

<pre><code>$('img#main').attr('src', $('img:first').src);
</code></pre>

<p><strong>Full Code:</strong></p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
        &lt;script type="text/javascript"&gt;
            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});
                });
            });
        &lt;/script&gt;
        &lt;style type="text/css"&gt;
            img.thm {
                cursor: hand;
                cursor: pointer;
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id="menu"&gt;
            &lt;img class="thm" src="images/test1.png"/&gt;
            &lt;img class="thm" src="images/test2.png"/&gt;
            &lt;img class="thm" src="images/test3.png"/&gt;
        &lt;/div&gt;
        &lt;div id="content"&gt;
            &lt;img id="main"/&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>
