jquery.InstagramFeed not showing properly - javascript

I'm trying to use a library called 'jquery.instagramFeed' that allows me to display images from a user's feed without using an access token. So, I've been trying to use it, but, for some reason, it's not showing me anything.
I've been researching for some weeks now, and I've tried A LOT of solutions proposed in many posts here (and in other forums as well), like these ones:
TypeError: $ is not a function when calling jQuery function
"Uncaught TypeError: $ is not a function" with instafeed
Is there still a way to fetch instagram feed without using access token now (06/2016)?
Some of them did work for me, but as soon as I refreshed the page, it disappeared again. And now, I can't make it show again, regardless of what I do.
I've been checking the developer console to see if there was something wrong, and I noticed that there it always showed me this message:
Uncaught TypeError: $.instagramFeed is not a function
at <anonymous>:3:16
at m (jquery.js:2)
at Re (jquery.js:2)
at w.fn.init.append (jquery.js:2)
at Object.<anonymous> (onepage:633)
at Function.each (jquery.js:2)
at percorrerOnepage (onepage:591)
at Object.success (onepage:663)
at u (jquery.js:2)
at Object.fireWith [as resolveWith] (jquery.js:2)
At this point, my code was like this:
JQuery and jquery.instagramFeed imports
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.instagramFeed/3.0.4/jquery.instagramFeed.js"></script>
The JQuery Function that shows Instagram Feed
<script type="text/javascript">
$.instagramFeed({
'username': 'turismoestadosp',
'container': ".instafeed",
'display_profile': false,
'display_biography': false,
'display_gallery': true,
'callback': null,
'styling': true,
'items': 8,
'margin': 1
});
</script>
And this is the container the functions searches for
<div class="instafeed"></div>
So, after looking at some posts on how to fix this error, I made some changes in my jquery.instagramFeed function, and it's currently like this:
<script type="text/javascript">
(function($){
$(window).on('load', function(){
$.instagramFeed({
'username': 'turismoestadosp',
'container': ".instafeed",
'display_profile': false,
'display_biography': false,
'display_gallery': true,
'callback': null,
'styling': true,
'items': 8,
'margin': 1
});
});
})(jQuery);
</script>
With that, I was finally able to make the error disappear, but it's still not showing like it's supposed to. I thought that maybe, it still wasn't being recognized as a function, so to make sure everything was working, I checked the jquery.js and the jquery.instagramFeed on the console... And to my surprise, it is.
Me checking if something is being returned
This is how it's supposed to be like
Instagram Feed working
But this is what it's showing right now
Instagram Feed not working
I've been stuck for a month now because of this problem, and I'm honestly out of ideas at this point. I'm still very new to programming, so I might be doing something wrong.. Can someone please tell me what the problem is?
Update (27/04)
Hello again, everyone. I'm still trying to fix this stupid problem.. I was caught up in other projects, so I wasn't able to properly focus on this. But now that I'm back to it, I noticed something kinda weird..
You see, everytime that I access the website for the first time in a day, it loads the feed, but, as soon as I refresh the page, it disappears and never loads the feed again. Is it something that has to do with cache or something like that?
As you can see, it's working
But as soon as I refresh the page it stops working...

I've attempted to re-create the feed with the code examples you've given, and it appears to work as expected
Check out the fiddle here
<div class="instafeed"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.instagramFeed/3.0.4/jquery.instagramFeed.js"></script>
<script>
(function($){
$(window).on('load', function(){
$.instagramFeed({
'username': 'turismoestadosp',
'container': ".instafeed",
'display_profile': false,
'display_biography': false,
'display_gallery': true,
'callback': null,
'styling': true,
'items': 8,
'margin': 1
});
});
})(jQuery);
</script>
In this screenshot It looks like you have a different version of jQuery loading (3.3.1), but in your examples here you're including 3.5.1, which suggests you're including it multiple times. Check your project for any other instances of jQuery being inserted, and remove the appropriate one.
Also order of these import statements is important, so make sure jQuery loads first, then the instagram widget, followed by your custom script.

UPDATE
It seems that the API itself is having some issues. I've been stuck for too long with this problem, so unfortunately, I'll have to choose another API that works. This one is too unstable, and it has a lot of problems..
I want to thank all the helpful answers and for all the help provided in this post.

Related

Uncaught TypeError: owl.owlCarousel is not a function

Before anything else, let me say that I have looked at other similar questions here and I still can't figure this out.
I'm trying to build a website, using .NET MVC (razor) using a this free template I found online.
What I did, was to replace all the markup of my Index.chstml view with the html code of the template. Moved all the scripts and css files to the corresponding folders in my solution, and changed the html to correctly reference the new paths as required.
Needless to say that the original template works perfectly. But for some reason I really can't figure out I'm getting the error:
Uncaught TypeError: owl.owlCarousel is not a function
I looked at the developer tools (chrome) and the scrips are there, so the only thing I can think of is something related to the loading order. Off course I didn't change that, so I wonder if razor did it somehow.
This is how my script loading section looks like:
<script src="#Url.Content("~/Scripts/modernizr-2.6.2.min.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.easing.1.3.js")"></script>
<script src="#Url.Content("~/Scripts/bootstrap.min.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.waypoints.min.js")"></script>
<script src="#Url.Content("~/Scripts/owl.carousel.min.js")"></script>
<script src="#Url.Content("~/Scripts/main.js")"></script>
and the problem happens inside main.js, right here:
owl.owlCarousel({
items: 1,
loop: true,
margin: 0,
responsiveClass: true,
nav: true,
dots: true,
autoHeight: true,
smartSpeed: 500,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
navText: [
"<i class='icon-arrow-left2 owl-direction'></i>",
"<i class='icon-arrow-right2 owl-direction'></i>"
]
});
Thanks to everyone in advance.
Well, I feel a bit ashamed, but looks it was just a conflict between the scripts that the template uses, with the ones MVC razor includes by default.
I commented this at the Layout partial view:
##Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")#
and voila! I realized that my code was loading more scripts than the original template.
Thanks everybody.

fraction slider not working

I've downloaded Fraction Slider from #jacksbox and have gone through the documentation countless times now and cannot figure out why my slider won't show the effects it's supposed to. This is the site I'm working on: http://pacificdesignacademy.com/NEW/2 and this is an example of what the slider is supposed to do: http://jacksbox.de/stuff/jquery-fractionslider/.
Here is the path to my js: ../NEW/2/fractionslider/jquery.fractionslider.js
And here is the path to my css ../NEW/2/fractionslider/fractionslider.css
All of the images are just stacking on top of one another regardless of me defining overflow:hidden on the containing element.
Not sure what else to do here, so any help is greatly appreciated. I'm supposed to launch this site September 1st... eep!
Thanks!
A simple check in the browser's console showed you have a syntax error on line 594 of your page. You have a closing parenthesis instead of an opening brace.
UPDATE After you fixed that, you're now getting the error :
Uncaught ReferenceError: jQuery is not defined
I suggest you move your code and place it after you've included both jQuery and the slider plugin, so your page should look like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="fractionslider/jquery.fractionslider.js"></script>
<script type="text/javascript">
jQuery(window).load(function(){
$('.slider').fractionSlider({
'fullWidth': true,
'controls': true,
'pager': true,
'responsive': true,
'dimensions': "1200,400",
'increase': false,
'pauseOnHover': true
});
});
</script>
You are missing an opening parenthesis when calling the plugin.
Change
$('.slider').fractionSlider()
To
$('.slider').fractionSlider({
On line 593
FractionSlider is garbish! Use LiquidSlider instead!
What one doesn't have but exist in the other:
well formated object oriented code,
automatic hardware acceleration with the new CSS3 transforms if the browser supports it (no js animation here!),
keyboard navigation,
hash linking where user can bookmark a specific slide or land to a page that opens slider to a specific slide,
many effects,
mobile 'swap' support
user extensible.
Of course it uses some other libraries and code snipets 'stolen' from here and there (https://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/ but actually it's reduntant as the use of Moderniz library in responsive designs makes the detection as simple as a one-line command, http://easings.net/ for the easing equations, https://daneden.me/animate/ for the transformations etc.)
The idea behind FractionSlider is indeed unique but the implementation sucks!

jQuery imgelens plugin - Uncaught TypeError: Object [object Object] has no method 'imageLens'

I am working on a eCommerce project at work which has two sides to it both different websites
The starting point for them both are the same the have all the same jQuery files linked and are identical if in view source.
On one site jQuery imgelens plugin works fine you scroll of the image and it zooms in
On the other site i get the following error:
Uncaught TypeError: Object [object Object] has no method 'imageLens'
which refers to this peace of code
jQuery(function () {
jQuery("#img_product_1").imageLens({
lensSize: 200,
borderSize: 1,
borderColor: '#666666',
imageSrc:"http://koolkiddz.co.uk/images/main/11456/1.gif?state=0.1646016"
});
});
Both sites call imageLens the same way with the same attributes and both can see the main jQuery file and the imageLens file.
Can someone come up with a possible reason or solution for why this is happen
http://koolkiddz.co.uk/item.asp?optProduct=172&txtItem=11456 here is the site with the error
http://wholesale.koolkiddz.co.uk/item.asp?optProduct=170&txtItem=11412 Here is the site without the error
There are little differences with the code but as you will see all the jquery and javascript are called the same
When I look into your jquery.imageLens.js file I see $.fn.imageLens1
Try to download the jquery plugin again at
http://www.dailycoding.com/Uploads/2011/03/imageLens/jquery.imageLens.js
and overwrite the existing one, or just try to remove the 1 after $.fn.imageLens
there is missing html tag "<"html">" in the page with error fix it and check.

JQuery JSTree loads as open and THEN minimizes

Fist off, been lurking for years, hopefully this post will be helpful to more than just me.
So I have a jstree that is generated for my site using very a small amount of JavaScript. Ideally, I would like for the page to load and show the 2 top folders only.
However, currently the page displays all of the names of the folders, subfolders, files, etc. for about 0.5 seconds before switching to the proper view. There are probably about 200 items in the tree structure
I added a manual tree.bind which does a "close_all", and I also tried hiding the DIV that it eventually appears in. Even though I put the code to show the DIV after I create the tree, it still shows everything before hiding itself.
I am using jsTree 1.0-rc3
Anyone have any thoughts?
<script type="text/javascript">
(document).ready(function () {
var tree = $("#sharepointHierarchy");
tree.bind("loaded.jstree", function (event, data) {
tree.jstree("close_all");
});
$("#sharepointHierarchy").jstree({
'plugins' : [ "themes", "html_data", "types", "ui" ],
'core' : {/* core options go here */},
});
document.getElementById("sharepointHierarchy").style.display="block";
});
</script>
I was able to mask this issue by adding the following code to the end of the function(). It is fairly straight-forward and simply gives the table time to load before showing it.
setTimeout(function() {
$("#sharepointDiv").show();
},1200);
I hope this helps someone else also.

IE7 Ext JS problem: Unspecified JS error on window.close()

I am using Ext JS to make a popup window, here is the code:
function popupImage(term, imageNumber){
if(currentPopupWindow!=null){
currentPopupWindow.close();
}
currentPopupWindow = new Ext.Window({
layout : 'fit',
closeAction :'hide',
plain : true,
constrain : true,
width: 300,
border: false,
html: "Blah blah content"<span onclick=\"currentPopupWindow.close();\">cerrar</span>"
});
currentPopupWindow.show(false, function(){
var el = Ext.get("termimage");
currentPopupWindow.setWidth(el.getWidth(true)+150);
});
currentPopupWindow.anchorTo(Ext.get("dictionarycontainer"), "tl");
}
In firefox this works fine. In IE7 it works, but always produces a javascript error saying "unspecified error".
What am I doing wrong?
EDIT
Removing the anchorTo line removes the error. I would still like to anchor to though so this isn't a great solution!
This is the solution, dumb as it is:
Have the same window creation, then instead of the calls to show and anchor to:
currentPopupWindow.render(document.body);
currentPopupWindow.alignTo(diccon, "tl", [40, 80]);
currentPopupWindow.show(false, function() {
var el = Ext.get(termim);
currentPopupWindow.setWidth(el.getWidth(true)+150);
});
A quick Google search tells me that you're not the only extJS user that is experiencing this. (See here and here and here for three examples.) Best would be to post in their forums so they can either fix their bug or work around an IE7 bug, whichever is the case.
This looks like it has something to do with it, not that I understand..
http://weblogs.asp.net/rajbk/archive/2006/11/29/ie-6-7-unspecified-error-when-accessing-offsetparent-javascript.aspx
qui is right. The problem lies in anchorTo. Use alignTo and the exception goes away.
Sorry qui, tried to "up" your response but were not able to. I don't have any reputation.:)
Athele
To your second question: Removing the anchorTo line removes the error. I would still like to anchor to though so this isn't a great solution!
Use alignTo and monitor scroll and mousewheel event and update the position accordingly and it is the same as anchorTo. That is the workaround I have found.
Athele
Try to add:
shim: false
to popup window parameter list.

Categories

Resources