xhatox

Thank you so much Royho! You are an incredible person. ??

Hello Royho,

Thank you so so much. The code you created works perfectly. I’ve been trying to solve this for over 3 days!

How can I thank you?

Hello Royho,

Thank you for your help again.
Unfortunately, I am trying to use pure JS, but not sure if it is easily possible to affect all related images. I feel like I’m pestering you, but do you have any JS solutions, or suggestions?

Thank you Royho.

Hello Royho,

Yes, that is correct. I’m pretty terrible at JS so am surprised I could even effect the first image.

Thank you again.

Hello Royho,

You are very kind! I looked again and you are right, the JS is working, but only affecting the first occurrence of “parent2”. I did not notice before that it was working at all!

Do you have any suggestions to make the loop affect all instances of .attachment-shop_catalog?

Thank you again Royho.

Thank you Royho!

Here is a link to a site page that shows the related products: Click here

(The above is a temporary URL).

Thank you again.

Hello Royho,

Thank you again for your reply! I have JS that “works” on sites like codePen, but does not work when I add it to the site. Here is the code using html copied from my site (edited out names and links):
https://codepen.io/xkurohatox/pen/rxLOEo

var parent = document.getElementsByClassName('owl-item');
var parent2 =
parent[0].querySelectorAll('.attachment-shop_catalog');

for (var i = 0; i < parent2.length; i++) {
    parent2[0].classList.add("otherClass");
}

Here is a debug view where you can easily inspect elements and see the “other class” applied.: https://s.codepen.io/xkurohatox/debug/rxLOEo

When I add this code to my site though, nothing happens. For some reason this appears near the footer (not the head)…and unfortunately it does not work.

Thank you.

Hello Royho,

Thank you for your reply. I only know basic Javascript, but did try using it to find the class and add another class to the end, but it did not seem to fire (nothing happened), although it did show in the header of the site. I also tried jQuery with the same results, found at StackOverFlow. I may have gotten the code wrong, however. Would JS be the easiest way to resolve this?

Thank you.

Hello Royho,

I am using a plugin that allows “exemptions” on lazy load items (Lazy Load XT), but the issue is I am unable to write exempted classes like this: “#Parent .Child” in order to show that I only want to exempt the .Child of #Parent– I can only utilize the final .Child class, which effects almost all site images. If I select just the #Parent, then the images are not effected. If I try to select #Parent.Child: nothing happens. #Parent .Child: Still effects most images AND the parent id.

I need to be able to only effect the Related Product images for this reason…which is why I would like to create an additional class for Related Products images, if possible.

Thank you!

Thank you James. I have reposted there.