Pretty photo not working: "prettyPhoto is not a function"? - javascript

I'm trying to setup PrettyPhoto on a wordpress site.
Example of page that loads script: http://kaarma.pixelworklab.com/quick-pay/
This is one of the errors output in firefox console:
[cycle] terminating; zero elements found by selector
jquery...test.js (line 27)
TypeError: $("a[href$='.jpg'], a[href$='.jpeg'], a[href$='.gif'], a[href$='.png']").prettyPhoto is not a function
[Break On This Error]
showTitle: true /* true/false */
Basically when you click on the images (bottom 3) they open in a new screen and never trigger prettyPhoto..
Any ideas greatly appreciated!
Thanks!

PrettyPhoto javascript and CSS files are not loaded, you have specified wrong urls
http://kaarma.pixelworklab.comLIBRARIES_URIprettyPhoto/css/prettyPhoto.css?ver=3.4.1
http://kaarma.pixelworklab.comLIBRARIES_URIprettyPhoto/js/jquery.prettyPhoto.js?ver=3.4.1

Related

Resolve the not a function error in the webpage

This is a screenshot of the error from Developer console in browser:
Now, I understand that the error occurs because .suggest() is not a function but it is being called in ajax.js?ver=1.6.5:1287. I don't fully understand what the errors information provided below that means. The lines i etc. Am I supposed to find the .suggest() function in jquery.js?ver=1.12.4-wp:2?
Here is the code from ajax.js:
jQuery(document).ready(function ($) {
$('#wpf_tags').suggest(
window.ajaxurl + "?action=wpforo_tag_search",
{ multiple:true,
multipleSep: ",",
resultsClass: 'wpf_ac_results',
selectClass: 'wpf_ac_over',
matchClass: 'wpf_ac_match',
onSelect: function() {}
}
);
// More code
This is from a WordPress plugin which works fine with the default 2019 theme. However, it throws up the error when I use it with a theme I created. I am loading jQuery version 3.3.1 in the footer of my theme. Can this be the reason for the above error?
Thanks.
UPDATE
I added the plugin to the footer of the webpage but the error still did not disappear. After that I looked at the source code of the page by pressing Ctrl + U. This showed me that the problematic file ajax.js loads on line 102. However, the suggest plugin loads on line 515.
I have no control over the source code on that page because it is generated by the WordPress plugin. How can I load these files in proper order?
Thanks.

Script didn't work on Firefox, 0 reaction on hover

I have a script that working perfectly on Chrome, but in Firefox there is no action after hovering linked object.
I tried to divide the script.js file for separate documents, but It won't help at all.
Here is the whole effect:
https://jsfiddle.net/lszewczyk45/9unawydo/9/
$(document).ready(function () {
const effect = new Effects('hover-effects');
effect.addEffect(document.querySelector('#cityEffect'), 'city', [ONMOUSEOVER]);
});
I think the problem is in calling the script - the lines at the end of the file, I pasted it above.
This is what FireFox says about your Javascript code:
I solve it, pasted in https://babeljs.io/, compile and change the js code.

Cannot read property 'length' of undefined [Galleria-1.4.2.js]

I'm getting the following error in my console:
Uncaught TypeError: Cannot read property 'length' of undefined galleria-1.4.2.min.js:2
trying to use Galleria.io, version 1.4.2 with the basic "classic theme". I do have jQuery (v1.10.2) included and the following code which should be the basic code for getting the galleria image gallery to work:
<script src="galleria/galleria-1.4.2.min.js"></script>
<script>
Galleria.loadTheme('/galleria/themes/classic/galleria.classic.min.js');
Galleria.run('.galleria', {responsive: true, height: 0.724, lightbox: true});
</script>
and guess what, it seems to work perfectly. BUT, I'm having this error in my console and I'm not allowed to have errors in my console. Neither do I like error messages in my console...
I have no clue what is causing this and what I can do about it, all I know it's triggered by the following line:
Galleria.run('.galleria', {responsive: true, height: 0.724, lightbox: true});
Even if I would leave the options blank. I'm also using bootstrap v3 if that might have anything to do with it.
The selector is a class and not an ID, but I've seen it in example code so it souldn't be a problem. I have multiple small image galleries on one page, so 0, 1 or more so working with ID's is not a good option. My application does require this.
Thanks in advance for helping.
Hello fellow Galleria User. Your problem is
Galleria.loadTheme('/galleria/themes/classic/galleria.classic.min.js');
You have to ensure its loaded before
Galleria.run('.galleria', {responsive: true, height: 0.724, lightbox: true});
is called.
To do so, I loaded the Theme in the Header after the Galleria.js.
I invoke the Galleria.run Command in a script-tag after the Galleria Container containing the Pictures.

Jquery mobile loading does not work

i want to show loading gif until data loaded with jquery mobile
but it does not work ..in console it give that error
Uncaught TypeError: Object #<Object> has no method 'loading'
this is my page :enter link description here
and in this page that i added code
$.mobile.loading( 'show');
and this not work:enter link description here
my code
<script type="text/javascript">
$('#details').live('pageinit', function (event) {
$.mobile.showPageLoadingMsg();
$("#listeu").empty();
$.getJSON('http://teknonova.com/Map/Home/getir3/1', function (data) {
The error sounds like either the jquery mobile library wasn't loaded properly (maybe loaded before jquery and failed init) or the version of jquery mobile doesn't support that method.
I'd use the dev console to see what the $.mobile object is for more clues

How do I Programmatically Enable/Disable Firebug Lite at Runtime?

How can I show or hide the entire Firebug panel and its icon at runtime ?
I browsed through Firebug.chrome but could not find anything appropriate.
I tried the following snippet which did not have any apparent effect, Firebug Lite was still there.
Firebug.extend(function (FBL) {
alert('TEST'); // This is run
FBL.Firebug.chrome.deactivate(); // No errors but nothing happens
});
The anonymous callback function is definitely invoked.
Quite an old post, but still popping on google search for such a question.
I'm not even sure which version of Firebug Lite you were using, but the following works well with 1.4.0 (once the page has loaded):
Firebug.chrome.open();
Firebug.chrome.close();
Firebug.chrome.toggle();
Firebug-Lite is enabled through the javascript function in the bookmark, and from there it just loads the javascript hosted at getfirebug.com.
If you control the website you're looking at, and want firebug to pop-up for that website, then you can add this to your code:
<script type="text/javascript">
function bookmarklet(F,i,r,e,b,u,g,L,I,T,E){
if(F.getElementById(b))
return;
E=F[i+'NS']&&F.documentElement.namespaceURI;
E=E?F[i+'NS'](E,'script'):F[i]('script');
E[r]('id',b);
E[r]('src',I+g+T);E[r](b,u);
(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);
E=new Image;
E[r]('src',I+L);
}
$(document).ready(function() {
bookmarklet(document,'createElement','setAttribute',
'getElementsByTagName','FirebugLite','4','firebug-lite.js',
'releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');
});
</script>
Or, did you mean that when you're browsing you always want Firebug / Firebug-Lite at the bottom?

Categories