How to make the Magnific Popup works with jQuery on Debut theme

[algoy]

Hi all,

I have recently followed the youtube video below to set up the Magnific Popup for the product images, the image did pop up by clicking the image. However, jQuery doesn't work.

https://www.youtube.com/watch?v=QVetGEogYy0&list=PLCBADLeZ_KGBfJN-WL8TZGJyolZ6z81Tu&index=7&t=23s

I am not sure if my iQuery is not updated, and I clicked the jQuery.js file, it shows below the details on top, and I am not sure if I should upgrade it and I don't know how to.

/*!
* jQuery JavaScript Library v1.9.0
* http://jquery.com/
*
* Includes Sizzle.js
* http://sizzlejs.com/
*
* Copyright 2005, 2012 jQuery Foundation, Inc. and other contributors
* Released under the MIT license
* http://jquery.org/license
*
* Date: 2013-1-14
*/ 

Then I followed the comment from diego_ezfyI to paste below the code under my current CSS in vendor.js, the Magnific Popup works but the top banner slider on my home page disappeared. 

https://community.shopify.com/c/technical-q-a/debut-theme-jquery-not-a-function/td-p/1062524

<script>
async function loadSomething(){
while(!window.hasOwnProperty("jQuery")){
await new Promise(resolve => setTimeout(resolve, 100));
}

jQuery(function() {
jQuery('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() {
var formIsValid = true;
var message = "Please inform us ........";
jQuery('[name^="attributes"], [name="note"]').filter('.required, [required="required"]').each(function() {
jQuery(this).removeClass('error');
if (formIsValid && jQuery(this).val() == '') {
formIsValid = false;
message = jQuery(this).attr('data-error') || message;
jQuery(this).addClass('error');
}
});
if (formIsValid){
jQuery(this).submit();
}
else {
alert(message);
return false;
}
});
});
</script>

<script>
$(window).on("beforeunload", function() {
var cartForm = jQuery('form[action="/cart"]');
if (cartForm.size()) {
var params = {
type: 'POST',
url: '/cart/update.js',
data: cartForm.serialize(),
dataType: 'json',
async: false
};
jQuery.ajax(params);
}
});

}

loadSomething();
</script>

Thank you for your help.

Best regards,

algoy

[algoy]

the vendor.js code is probably too long to upload

[algoy]

I just found that even if I don't paste the above vendor code, the magnific popup would work when I remove the code below from vendor.js, however, the banner slideshow would not work, anyone can help?

/*
* jQuery throttle / debounce - v1.1 - 3/7/2010
* http://benalman.com/projects/jquery-throttle-debounce-plugin/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
function(e,t){var n,i=e.jQuery||e.Cowboy||(e.Cowboy={});i.throttle=n=function(e,n,o,r){function s(){function i(){l=+new Date,o.apply(u,d)}function s(){a=t}var u=this,c=+new Date-l,d=arguments;r&&!a&&i(),a&&clearTimeout(a),r===t&&c>e?i():n!==!0&&(a=setTimeout(r?s:i,r===t?e-c:e))}var a,l=0;return"boolean"!=typeof n&&(r=o,o=n,n=t),i.guid&&(s.guid=o.guid=o.guid||i.guid++),s},i.debounce=function(e,i,o){return o===t?n(e,i,!1):n(e,o,i!==!1)}}(this);

Thank you.

Best regards,

algoy