Loading images into a DIV tag
<p>I have a list of images within a div tag with the id <code>sIMG</code>.</p>

<p>Example:</p>

<pre><code>&lt;div id="sIMG"&gt;
&lt;img src="1.jpg" title=""/&gt;
&lt;img src="2.jpg" title=""/&gt;
&lt;img src="3.jpg" title=""/&gt;
&lt;img src="4.jpg" title=""/&gt;
&lt;img src="5.jpg" title=""/&gt;
&lt;img src="6.jpg" title=""/&gt;
&lt;/div&gt;
</code></pre>

<p>Now If I click on any image I need it to load into the <code>sIMG</code> div tag.</p>

<p>My code looks as follows, but only seems to load in the first image:</p>

<pre><code>jQuery(document).ready(function(){
    jQuery('#sIMG img').click(function(){

        /* Get the sources */
        var currentSRC = jQuery('#sIMG img').attr('src');
        var altSRC = jQuery('#sIMG img').attr('title');
        alert(currentSRC)
        /*Fade, Callback, swap the alt and src, fade in */
        jQuery('#IMGHolder').fadeOut('fast',function(){
            jQuery('#IMGHolder').html('&lt;img src='+currentSRC+' title='+altSRC+' /&gt;');
            jQuery('#IMGHolder').fadeIn('fast');
        });
    });
});
</code></pre>

<p>Am I doing something wrong here?</p>
