Question

我正在使用fancybox（用于弹出）和lightslider（用于轮播缩略图）使用滑块制作弹出链接，它看起来像这样。

代码像这样

    <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”。 the class change to this when that li image clicked

我的问题是，我可以从'silide acive'类中获取 img src 并更改fancybox的 a href 链接吗？

注意：

我将ul更改为div类，而不是div id，因为我的网站使用了许多与该ul不同的ul是data-fancybox ='quick-view- 234 '，我是使用唯一ID，因此弹出窗口不会造成混淆。

非常感谢！我还在学习两个月，网页设计很有趣。

更新：我正在尝试将其上传到Codepen，谢谢CodePen

根据LightSlider活动图像更改Fancybox链接

0 个答案: