/    Sign up×
Community /Pin to ProfileBookmark

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](https://nicolaslagios.com/παραγγελια-νεας-ιστοσελιδας/υγεία-ομορφιά/)

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.

to post a comment
CSSHTMLJavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@tazmeahDec 29.2020 — Change the line which begins with "for" from this

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

to this

for (i = 0; i &lt; 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-post__thumbnail__link" which is 31 characters long.
Copy linkTweet thisAlerts:
@nicolaslagiosauthorDec 30.2020 — It works. Thank you, I am new to javascript, but I understand that this is a problem of logic. My mistake.

Thanks and happy new year ;)
Copy linkTweet thisAlerts:
@VITSUSADec 31.2020 — @nicolaslagios#1626307 No problem, it happens in the coding but you got the solution that's nice :)

Happy New Year :)
×

Success!

Help @nicolaslagios spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...