Good day guys,

I've a DOM like this

```
<div class="Gallery">
  <div class="GaleryLeftPanel">
     <img id="img1" src="/Content/Public/images/1.png" style="z-index: 100" width="141"
                            height="140" alt="image 1" /></div>
   <div class="GalleryMiddlePanel">
      <img id="img2" src="/Content/Public/images/3.png" style="z-index: 99" width="715"
                            height="497" alt="image 2" /></div>
   <div class="GaleryRightPanel">
      <img id="img3" src="/Content/Public/images/2.png" style="z-index: 98" width="140"
                            height="140" alt="image 2" /></div>
 </div>

```

What I need is, If I click on **img1**, *img2 is replaced with img1*, and *img3 is replaced with img2* and *img1 is replaced with img3* (circular motion 1->2, 2->3, 3->1). and it continuous... and if I click on img3 then it's reverse (1<-2, 2<-3, 3<-1).

for this I'm using JQuery as follows:

```
$('img#img1').click(function () {
        var currentScr = $(this).attr('src');
        var second = $('img#img2').attr('src');
        var third = $('img#img3').attr('src');

        $('img#img3').attr('src', second);
        $('img#img2').attr('src', currentScr);
        $('img#img1').attr('src', third);
    });

    $('img#img3').click(function () {
        var third = $(this).attr('src');
        var first = $('img#img1').attr('src');
        var second = $('img#img2').attr('src');

        $('img#img2').attr('src', third);
        $('img#img3').attr('src', first);
        $('img#img1').attr('src', second);
    });

```

It's working fine. now, What I need is, Always the 2nd image should be replace with large image instead of original image... say for example:

click on img1 (**1->2L**, 2->3, 3->1). here 2L is large image of img1. and 
click on img3 (1<-2, 2L<-3, 3<-1). here 2L is large image of img3

How to do this?, Please help me