InstagramFeed | Vanilla JavaScript Instagram Feed without access token | Plugin library

The first function uses dollar ($) which loops the functions/variables ($slider, $.instagramFeed and slick). At the function end, outside I created another function called $("#instagram-feed-slider .slick-slide > figcaption").each(function(e), which is based on @dean-meehan's code from Wrapping css class to Hashtag(#) content & At(@) content.

• I have moved the function to several parts inside the first function, but it does not work;
• I added $(document).on to the seconf function, but no effect;
• I added different variables with $(document).on, but no effect;
• I removed e from function(e) and changed from $("#instagram-feed-slider .slick-slide > figcaption") to $(figcaption"), no effect.

I tested with Firefox's Console's "Run", the function worked and detected the matches of at and hashtags.

Here is the minimal JavaScript code:

I'm trying to create a carousel slider with instagram feed using jquery.instagramFeed.js with slick.js.

On codepen I inserted the instagram feed and the slick slider below to see if the slick is working.

Codepen: https://codepen.io/adrianovarlotta/pen/XWKNBqg

I changed some codes on instagram feed js, adding on line 132:

html += "

and closing that section on line 173:

html += "

Trying to make work the slick slider on instagram feed without sucess.

I'm tryng to do some jQuery stuff when both instagramLoadError and imagesLoaded functions have been loaded.

For this I'm using if(instagramLoadError() && imagesLoaded()){}) but it's not working as expected.

I'm just starting with JS but I read something about "scope" saying that I can't target my instagramLoadError and imagesLoaded functions since it's not within the same scope. For this reason or another I'm still getting the "x function is not defined" error.

What should I do in this case?

What I want: I am creating a blog using Laravel 7 for my client. He wants to add a section containing a link to his Instagram posts by something similar to a carousel, so that, when he posts a new Instagram post the website will be automatically updated.

What I did:

1. I went to developers.facebook.com, created a new app and setup Instagram Basic Display where I got Instagram App Id, Secret and Name.
2. Added Client OAuth Settings to be for localhost, it forced me to add ssl (https) I know this won't work, I will change it to the actual domain later, and I hope for a way to test that on localhost too. .
3. I added the Instagram tester and authorized it and generated an access token.
4. I installed composer require dymantic/laravel-instagram-feed from github-repo
5. I ran the command php artisan vendor:publish which showed me these options

I am using new Instagram Plugin (which works without API) to show contents related to Instagram account, all is working well with the plugin except that plugin doesnt show content related icons such as cards, videos etc

Code doesnt add icons related to contents but i not noticed that html code generated by plugin add's CSS classes to anchor element as instagram-video, instagram-image, instagram-sidecar.

based on this i though to use CSS feature to detect css of element such as .instagram_gallery > a[class*="instagram-video"] and add relevent css to show video icon if anchor element has video class and so.

my code is not showing icon properly as as it can be seen in codepen example

Code sample

So I got this script, that creates variables inside of a for loop, which is inside different functions. I'm talking about these variables right here (tried to shorten them down, below is the entire code)

I have a issue that I want to solve but do not fully understand on how to approach it and wondering if anybody on here knows a way at all.

In my WordPress theme I have a script.js file located in a JS Folder which has a script for loading an Instagram feed on page load.