I have strange problem that I can’t solve.
I have a portfolio style page with small thumbnails and each thumbnail hyperlinks to another page on the same domain.
I have write javascript code to change all the `<a><a/>
The original link: `<a class=”elementor-post__thumbnail__link” href=”https:…”>…</a>
The link after apply js: `<a class=”elementor-post__thumbnail__link” href=”javascript:;” data-fancybox=”” data-type=”iframe” data-src=”https://…”>…</a>
The problem is that my code, only works for the first 31 thumbnail links
I have place the code on the bottom of the page after the content.
Do you have any ideas for my problem?
This is the page: [Example
And this is the code after the content:
`<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css” />
<script src=”https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js”></script>
<script>
var i;
for (i = 0; i < “elementor-post__thumbnail__link”.length; i++) {
document.getElementsByClassName(“elementor-post__thumbnail__link”)[i].setAttribute(“data-fancybox”, “”);
document.getElementsByClassName(“elementor-post__thumbnail__link”)[i].setAttribute(“data-type”, “iframe”);
var datasrc = document.getElementsByClassName(“elementor-post__thumbnail__link”)[i].getAttribute(“href”);
document.getElementsByClassName(‘elementor-post__thumbnail__link’)[i].setAttribute(“data-src”, datasrc);
document.getElementsByClassName(“elementor-post__thumbnail__link”)[i].setAttribute(“href”, “javascript:;”);
}
</script>
Any help is useful. Thanks in advance, Nicolas.