客户端正在使用产品库扩展,并希望以下内容:
- 当点击缩略图时,缩略图必须显示在特色图像位置;
- 当点击当前特色图像时,图像必须展开为灯箱。
我设法通过添加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,每当另一个缩略图被点击。有人知道我会怎么做吗?
我从内联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;
}
如果有人有更有效的建议,我很乐意阅读!