html attr을 이용해 이미지를 클릭하면 거기에 해당하는 이미지로 변경하게 js를 만들었는데요 변경된 이미지를 또 한번 클릭했을시 colorbox popup으로 뜨게 하려고 하는데 가능한가요? 어떤식으로 js를 짜야 하는지 막막하여 이렇게 글 올립니다. 고수님들 부탁드려요

html

<section>
    <div class="section_wrap">
        <div class="section_wrap_rel">
            <h1>portpoflio</h1>
            <div class="box1">
                <ul>
                    <li>
                        <div>
                            <img src="img/1.jpg" alt="">

                            </div>
                    </li>
                    <li>
                        <div>
                            <img src="img/2.jpg" alt="">
                        </div>
                    </li>

                    <li>
                        <div>
                            <img src="img/3.jpg" alt="">
                        </div>
                    </li>

                    <li>
                        <div>
                            <img src="img/4.jpg" alt="">
                        </div>
                    </li>

                </ul>

            </div>
            <div class="changebox">
                <p>Lorem ipsum </p>
                <a class="group1" href="img/1.jpg" title=""><img src="img/1.jpg" alt=""></a>

            </div>
            </div>
</div>
</section>

 

 

css....

  .box1 {
    position:absolute;
    width:450px;
    height:450px;
    top:20px;
    left:20px;
  }
    .box1>ul {
      position:relative;
      width:100%;
      height:100%;
    }
    .box1>ul>li {
      position:absolute;
      width:150px;
      height:150px;
      overflow: hidden;

    }
    .box1>ul>li:nth-child(1) {
      left:60px;
      top:160px;
      background:#676734;
    }
    .box1>ul>li:nth-child(2) {
      left:300px;
      top:120px;
      background:#2d2d5e;
    }
    .box1>ul>li:nth-child(3) {
      left:180px;
      top:250px;
      background:#572d5e;
    }
    .box1>ul>li:nth-child(4) {
      left:50px;
      top:390px;
      background:#5e552d;
    }
    .box1>ul>li>div {
      position: relative;
      width:100%;
      height:100%;
    }

    .box1>ul>li>div img {
      width:200px;
      height:200px;
      display: block;
      cursor: pointer;
      filter: grayscale(100%);
      transition:all 0.5s;
    }
    .box1>ul>li>div img:hover {
      filter:grayscale(0);

    }

    .changebox {
      position:absolute;
      width:450px;
      top:150px;
      left:500px;
      height:400px;
      transition:all 1s;
    }
    .changebox>img {
      width:350px;
      height:300px;
    }
 

 

 

js

$(function(){

$('.box1>ul>li:nth-child(1)').click(function () {

  $('.changebox>img').attr('src','img/1.jpg');

});

$('.box1>ul>li:nth-child(2)').click(function () {

  $('.changebox>img').attr('src','img/2.jpg');

});

$('.box1>ul>li:nth-child(3)').click(function () {

  $('.changebox>img').attr('src','img/3.jpg');

});

$('.box1>ul>li:nth-child(4)').click(function () {

  $('.changebox>img').attr('src','img/4.jpg');

});

});