首页 文章

单击下一个缩略图时删除内联样式

提问于
浏览 次
3

客户正在使用Product Gallery扩展，并且需要以下内容：

  • 单击缩略图时，缩略图必须显示在特色图像位置;

  • 当点击当前特色图像时，图像必须扩展到灯箱 .

我设法通过添加lightbox.js来处理这两个功能，将相应的链接放在产品库图像周围，并使用以下代码：

jQuery(".thumb-link").click(function() {
  setTimeout(function() {
      var visibleImage = document.getElementsByClassName('gallery-image visible')[0].id;
      jQuery(a[data-lightbox=" + visibleImage + "]").attr('style', 'position: absolute; left: 0; right: 0; bottom: 0; top: 0;');
  }, 100);
});

它的作用是，它获取当前特色图像的ID，该图像始终包含类 gallery-image 和 visible . 每个缩略图都有类 thumblink . 我添加了timeOut，因为否则会检测到前一个a元素的ID，它会扩展前一个图像的lightbox-link，而不是新选择的一个 .

但是，无论何时单击另一个缩略图，我无法创建的是删除内联CSS . 有谁知道我会怎么做？

javascript jquery lightbox image-gallery

1 回答

  • 1

    我通过从内联CSS到通过jQuery添加CSS类并在timeOut之前删除它来修复它 . 代码如下：

    JS

    jQuery(".thumb-link").click(function() {
    // Remove Class from Current Featured Image
    var visibleImage = document.getElementsByClassName('visible')[0].id;
    jQuery(a[data-lightbox=" + visibleImage + "]").removeClass('currentLink');

    // Set Class for New Featured Image
    setTimeout(
        function() {
            var visibleImage = document.getElementsByClassName('visible')[0].id;
            jQuery(a[data-lightbox=" + visibleImage + "]").addClass('currentLink');
        },
        100);
});

    CSS

    a.currentLink {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

    如果有人提出更有效的建议，我很乐意阅读！

    回复于

相关问题