Thumbnails Image Slider
<p>Here This is what I am trying. On Click of each thumbnail I have to display the Larger Image. I need some help so that I can know my issue why the click method is not working fine for me.</p>

<p><strong>Thumbs Part HTML</strong></p>

<pre><code>&lt;div class="ScreenShot" id="__control0" data--ui="__control0"&gt;
&lt;div id="thumbs" data--ui="thumbs" class="UiHLayout UiHLayoutNoWrap"&gt;
&lt;div class="UiHLayoutChildWrapper"&gt;
&lt;div id="__set0" data--ui="__set0" class="UiUx3DS"&gt;
&lt;div id="__set0-items"&gt;
&lt;div id="__view0" data--ui="__view0" class="UiUx3DSSV"&gt;
&lt;div class="UiUx3DSSVFlow UiUx3DSSVItem UiUx3DSSVSelected" id="__item0-__set0-0" data--ui="__item0-__set0-0"&gt;
&lt;div id="__layout0-0" data--ui="__layout0-0" class="uiVlt"&gt;
&lt;div class="uiVltCell"&gt;
&lt;img id="__image0-0" data--ui="__image0-0" src="images/image_01_thumb.jpg" class="UiImg" role="presentation" alt="" tabindex="-1"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item0-__set0-1" data--ui="__item0-__set0-1"&gt;
&lt;div id="__layout0-1" data--ui="__layout0-1" class="uiVlt"&gt;
&lt;div class="uiVltCell"&gt;
&lt;img id="__image0-1" data--ui="__image0-1" src="images/image_02_thumb.jpg" class="UiImg" role="presentation" alt="" tabindex="-1"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item0-__set0-2" data--ui="__item0-__set0-2"&gt;
&lt;div id="__layout0-2" data--ui="__layout0-2" class="uiVlt"&gt;
&lt;div class="uiVltCell"&gt;
&lt;img id="__image0-2" data--ui="__image0-2" src="images/image_03_thumb.jpg" class="UiImg" role="presentation" alt="" tabindex="-1"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>Larger Images HTML</strong></p>

<pre><code>&lt;div id="panel" data--ui="panel" class="UiHLayout UiHLayoutNoWrap"&gt;
&lt;div class="UiHLayoutChildWrapper"&gt;
&lt;div id="__set1" data--ui="__set1" class="UiUx3DS"&gt;
&lt;div id="__set1-items"&gt;
&lt;div id="__view1" data--ui="__view1" class="UiUx3DSSV"&gt;
&lt;div class="UiUx3DSSVFlow UiUx3DSSVItem UiUx3DSSVSelected" id="__item1-__set1-0" data--ui="__item1-__set1-0"&gt;
&lt;div id="__layout1-0" data--ui="__layout1-0" class="uiVlt"&gt;
&lt;div class="uiVltCell"&gt;
&lt;img id="__image1-0" data--ui="__image1-0" src="images/image_01_large.jpg" class="UiImg" role="presentation" alt="" tabindex="-1"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item1-__set1-1" data--ui="__item1-__set1-1"&gt;
&lt;div id="__layout1-1" data--ui="__layout1-1" class="uiVlt"&gt;
&lt;div class="uiVltCell"&gt;
&lt;img id="__image1-1" data--ui="__image1-1" src="images/image_02_large.jpg" class="UiImg" role="presentation" alt="" tabindex="-1"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item1-__set1-2" data--ui="__item1-__set1-2"&gt;
&lt;div id="__layout1-2" data--ui="__layout1-2" class="uiVlt"&gt;
&lt;div class="uiVltCell"&gt;
&lt;img id="__image1-2" data--ui="__image1-2" src="images/image_03_large.jpg" class="UiImg" role="presentation" alt="" tabindex="-1"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>Jquery</strong></p>

<pre><code>$("#thumbs img").click(function(){
    $("#thumbs img.clicked").removeClass('clicked');
    $("#panel img").hide();
    $("#panel img:nth-child("+Number($(this).index()+1)+")").fadeIn();
    $(this).addClass('clicked');
});
</code></pre>

<p>Here is the demo:
<a href="http://jsfiddle.net/L7yKp/5/" rel="nofollow">http://jsfiddle.net/L7yKp/5/</a></p>

<p>On click of each thumbnail the corresponding image should be fadeIn. But here every larger image is fading In.</p>
