Question

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.).

JQUERY

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

HTML

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

Thanks!

Answer 1

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