Search code examples
javascriptiframepopupfancyboxlimit

Javascript change <a> links to fancybox iframe popup is limited to 31 links only

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/> links to fancybox links in order to opened in iframe popup.

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/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/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.

Solution

  • As always I find the answer myself or they help me from elsewhere.

    Anyways, here is the solution:

    Change the line which begins with "for" from this

    for (i = 0; i < "elementor-postthumbnaillink".length; i++) {

    to this

    for (i = 0; i < document.querySelectorAll("a.elementor-post__thumbnail__link").length; i++) {

    Your code is only doing it 31 times because your current code says to repeat it for the length of the word "elementor-postthumbnaillink" which is 31 characters long.

    Thanks to tazmeah for this solution on another site.