Изменить ссылку Fancybox в зависимости от активного изображения LightSlider

Question

Я делаю всплывающую ссылку со слайдером, используя fancybox (для всплывающих окон) и lightlider (для миниатюры карусели), это выглядит так.

введите описание изображения здесь

И код выглядит так

    <div class='product'>

        <div class="produc-name"> AKLB-546</div>

    <a href='https://via.placeholder.com/400' data-fancybox='quick-view-234' data-type='image'>   

      <ul class="lightSlider">

      <li data-thumb='https://via.placeholder.com/400'>
            <img src='https://via.placeholder.com/400' class='container-img' />
        </li>

        <li data-thumb='https://via.placeholder.com/300'>
            <img src='https://via.placeholder.com/300' class='container-img' />
        </li>

        <li data-thumb='https://via.placeholder.com/200'>
            <img src='https://via.placeholder.com/200' class='container-img' />
        </li>
      </ul>


    </a>







    <div class='d-none'>

    <a href='https://via.placeholder.com/400' data-fancybox='quick-view-234' data-type='image'></a>


    <div class='product-form'>
       some stuff here
      </div>
    </div>
  </div>

Я знаю, что класс li изменится на "islide active" при выборе изображения из эскиза. изменение класса на это, когда это изображение щелкнуло

У меня вопрос, могу ли я получить img src из класса 'silide acive' и изменить ссылку a href для fancybox ??

Примечание:

Я изменяю ul на класс div, а не на div id, потому что мой веб-сайт, использующий многие из этих ul, с разницей data-fancybox = 'quick-view- 234 ', я использую уникальный идентификатор, поэтому всплывающее окно не будет сбивать с толку.

Спасибо большое! я все еще учусь 2 месяца, веб-дизайн - это весело.

Обновление: я пытаюсь загрузить его в codepen, спасибо CodePen