What is the proper selector on an thumbnail image using Jquery on nested DIVs in a gallery?
<p>When each image is clicked, the main image is supposed to change. I am having trouble accessing the correct selector. I have tried .parent and many different variations of the selector (i.e. img.redCarpet, redCarpet.img, etc.).</p>

<h2>JQUERY</h2>

<pre><code>$('img.redCarpet').click(function () {
     var src = $(this).attr('src');
     $('#photoSpotImage').attr('src', src.replace(/-thumb/, ''));
 });
</code></pre>

<h2>HTML</h2>

<pre><code>&lt;div id="photoSpot"&gt;&lt;img id="photoSpotImage"src="Images/photos/1/1.jpg" alt=""/&gt;&lt;/div&gt;
&lt;div class="thumbnailOverlay"&gt;
    &lt;div class="thumbnailStyles"&gt;
        &lt;div id="redCarpetCarousel"&gt;
            &lt;div class="redCarpet"&gt;
                &lt;img src="Images/photos/1-thumbs/1.jpg" alt="" /&gt;&amp;nbsp;&amp;nbsp;
                &lt;img src="Images/photos/1-thumbs/10.jpg" alt="" /&gt;&amp;nbsp;&amp;nbsp;
                &lt;img src="Images/photos/1-thumbs/100.jpg" alt="" /&gt;&amp;nbsp;&amp;nbsp;
                &lt;img src="Images/photos/1-thumbs/101.jpg" alt="" /&gt;&amp;nbsp;&amp;nbsp;
                &lt;img src="Images/photos/1-thumbs/102.jpg" alt="" /&gt;&amp;nbsp;&amp;nbsp;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Thanks!</p>
