Remove inline-styles when clicked on the next thumbnail

Question

A client is working with a Product Gallery extension, and wants the following:

• When clicked on the thumbnail, the thumbnail has to be displayed in the featured image position;
• When clicked on the current featured image, the image has to be expanded into lightbox.

I managed to take care of both features by adding lightbox.js, putting the corresponding links around the product gallery images, and with the following code:

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);
});

What it does is, it gets the ID of the current featured image, which always carries the classes gallery-image and visible . Every thumbnail has the class thumblink . I added the timeOut, because otherwise the ID of the previous a-element would be detected and it would expand the lightbox-link of the previous image, instead of the newly selected one.

However, what I can't manage to create is the removal of the inline CSS, whenever another thumbnail is clicked. Does anyone have an idea how I would go about this?

Answer 1

I fixed it by going from inline CSS to adding a CSS-class through jQuery and removing it before the timeOut. The code is as follows:

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;
}

If anyone has a more efficient suggestion, I'd love to read it!