We Keep Coding

WordPress Lazyloading images breaking Fancybox

I am using WordPress. Fancy box and a lazy loader plugin. However, since adding the lazy load plugin the fancy box has stopped working.
When you initiate the fancybox plugin, you do so with some javascript like so:
var select = $('a[href$=".bmp"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".BMP"],a[href$=".GIF"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".PNG"]');
select.attr('rel', 'fancybox');
select.fancybox();
This fires with the rest of the javascript when the document has loaded.
However, now I am getting this error:
select.fancybox is not a function
I am assuming that the lazy loading plugin is taking the images out of the equation so this function isnt able to do anything.
I have tried attaching it again afterwards but I feel like I am going in the wrong direction:
$('html').on('mousemove', 'a[href$=".bmp"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".BMP"],a[href$=".GIF"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".PNG"]', function(){
$(this).attr('rel', 'fancybox');
$(this).fancybox();
});
Any ideas?

WordPress now includes browser-level lazy-loading attribute for all images, using the 'loading' image attribute (loading="lazy"). Perhaps you no longer need the lazy loading plugin?
See here:
https://make.wordpress.org/core/2020/01/29/lazy-loading-images-in-wordpress-core/

Load jQuery at the end of the page?

I have some code that uses jQuery and it's in the html. I include jQuery at the bottom of the page so the problem is that every use of $. is undefined.
I remember reading somewhere that you can create a holder $ function and when the jQuery get loaded it will execute everything that called $. (like some sort of a stack).
Can you please tell me how to do this? Like with a code example or if you have that article link it will be great. :)

No, you can't make a whole bunch of jQuery calls before it's loaded and then expect something later on to play back everything.
Your choices are:
Load jQuery before things that use it.
Don't use any jQuery calls until after the page and jQuery are loaded.
Create your own list of initialization functions that you want called after jQuery is loaded and register those callbacks as the page is loading. Then, have your own function that walks that list of initialization functions and calls them all once jQuery is loaded to kick of the initialization that uses jQuery.
But, #3 seems like a lot of work that isn't really necessary. Either load jQuery up front or don't run your initialization functions that use jQuery until after it is loaded - either is cleaner and simpler.
Keep in mind that you also need to load any jQuery plugins after jQuery is loaded because they use jQuery to initialize/install themselves.

Make sure that you are not loading any plugins before you load jQuery. Plugins extend the "$" object, so if you load a plugin before loading jQuery core, then you'll get the error you described.
It could be that you have your script tag called before the jquery script is called
place the jquery.js before your script tag and it will work

Activating wordpress plugins breaks jquery effects

I'm currently working on converting an HTML5 template called Rekreato into a wordpress theme. I've managed to set up a bare-bones theme, but whenever I activate any plugins with jQuery scripts, a few of my jQuery effects are broken. Specifically, in Firefox debugger I get --
TypeError: jQuery.easing[jQuery.easing.def] is not a function #
jquery.easing.1.3.js:46
Here is the page in question. You can see about halfway down there is an image slider that is not functional. I have left one plugin active, called WP eMember.
I've tried a number of things like configuring my theme as a child theme, wrapping jquery.easing.1.3 in a document ready function, and moving the script call around in the code, but to no avail. I'm not even sure that the easing script is at fault. The answer is probably staring me in the face, but I can't seem to figure it out. Many thanks in advance.
EDIT: Excellent suggestion from markratledge. I put the scripts in functions.php with wp_register_script() and wp_enqueue_script(). At first I was very confused that even more things were broken. Reading further, I saw that since Wordpress uses a noConflict wrapper around its built-in jQuery library, the $ shortcut is unavailable. So, I went through all of my scripts that were showing errors in the inspector and swapped '$' with 'jQuery'. Voila! Everything jives. Thanks again!

Check out Function Reference/wp enqueue script « WordPress Codex on how to load JS in WordPress themes and avoid jQuery errors, with examples shown.
You're loading a bunch of jQuery by direct link, but then wp_head comes in and loads more jQuery for the plugins, and collisions occur. I.e., the two different main jQuery libraries; check in the Firefox console to get a list of all the JS that is loading.
From that doc:
wp_enqueue_script links a script file to the generated page at the right time according
to the script dependencies, if the script has not been already
included and if all the dependencies have been registered. You could
either link a script with a handle previously registered using the
wp_register_script() function, or provide this function with all the
parameters necessary to link a script.
This is the recommended method of linking JavaScript to a WordPress
generated page.

Why should I need to add jQueryMobile Script only after all other scripts?

If I add any other scripts after JQM script then my page doesn't work properly.
Also according to Jqm docs I must include jQM script at the end of other scripts.
What's the reason behind it ?
Thanks

First, this is not always the case, but there are some situations when this is necessary. Any plugin than can cause a change to the page content loaded into the DOM must be initialized before jQuery Mobile. Best example is jQuery UI.
To understand this you need to understand how jQuery Mobile works. When jQM initialize it load's everything into the DOM. Even then process is not over because when content is loaded then jQM starts a markup enhancement process (custom widget styling). This process should not be tempered with because it could cause problems with widgets initialization.
One more thing, if jQuery Mobile detects something else is messing with a DOM content during the page initialization it will stop the process and ajax page loader will be shown.

Countdown timer with ajax loaded content (jquery mobile) not working

I am having some trouble getting a countdown timer to work on my jQuery mobile page. If I have it load on a static html page it works as it should (see that page here:http://www.beingproperties.com/match-game). when you hit the start game the timer starts.
I have recently ported this over to the jQuery mobile framework and the timer is not working on that site (see this here by going to the link and clicking the 'multi-page link, then the start game link): http://www.beingproperties.com/match-game/home.html).
I have tied using 'pageshow' as scene below and though I get it to work and throw an alert, once I add in my code to execute nothing happens.
$('#shapesPage').live('pageshow', function () {
I know that it's something regarding the ajax loaded page, though all other jQuery fires on this page except for the countdown timer. I'm at a loss and would much appreciate a kick in the right direction.
I used the inspector and it's not very informative. Any insight to get this resolved, or proper ways to debug these types of issues would be much appreciated. thanks in advance. -Chris

Looking at the source for home.html, it seems that you haven't included js/plugins.js, only js/index.js.
I know you've included it in shapes.html, but JQM is a bit weird about loading external scripts when loading a page via ajax, as stated in the documentation:
The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page. If you need to load in specific scripts or styles for a particular page, we recommend binding logic to the pageinit event (details below) to run necessary code when a specific page is created (which can be determined by its id attribute, or a number of other ways). Following this approach will ensure that the code executes if the page is loaded directly or is pulled in and shown via Ajax.
Edit: You can not call any functions that modify the DOM until it is fully loaded. This is signaled in JQM by the pageinit event. Read about scripting and events for more info.
Try surrounding your javascript for shapes.html with
$( document ).delegate("#shapesPage", "pageinit", function() {
...
});