Wordpressでフォトギャラリーを作っていますが、写真を拡大表示するためのJSが動きません

前提

現在静的なサイトに、一部、photoギャラリーをWordpressでつくっています。

フォトギャラリーをattachmentを取得して一覧で表示させCSSで並べるところまでは行きました。

その写真を、下記のJSを使って、クリックすると拡大表示されるようにしたいです。
https://webcat.work/modal/
こちらを使用させて頂いております。
jQueryの読み込みコードの後で、ダウンロードした「shinomodal.js」を読み込ませるものです。

front-page.php↓
このように、メディアに追加した画像が、一覧になるようにしています。
img class="shinomodal_baseimg"とした画像が、クリックすると表示されるはずなのですが、クリックしても動きません。

php
1<?php
2	$myposts = get_posts('post_type=attachment&post_mime_type=image&posts_per_page=10&orderby=date');
3	if (have_posts()):
4	foreach($myposts as $post) : ?>
5		
6	<div class="wedding-photogallery">
7	<img class="shinomodal_baseimg" src="<?php echo wp_get_attachment_url($post->ID); ?>">
8	</div>
9
10	<?php endforeach; ?>
11	<?php endif; ?>

該当のソースコード

↓$ is not define エラーが出ており、調べたところjQueryが動いていないエラーだということが分かったので、header.phpの最後にこのように書いています。
header.php

PHP
1   <?php wp_deregister_script('jquery'); ?>
2   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
3   <script src="<?php echo get_template_directory_uri() ?>shinomodal.js" type="text/javaScript" charset="utf-8"></script>

このように書いたところ、今度はこのように出ました。
Mixed Content: The page at 'https://●●.com/●●/wedding/weddingphotos/' was loaded over HTTPS, but requested an insecure script 'http://www.●●.net/log/cnt.js'. This request has been blocked; the content must be served over HTTPS.

こちらを調べたところ、エラーの内容とは直接は関係ないものの可能性が高いということで、パスの書き方が違うのか、原因をまだ特定できておりません。

JSフォルダを入れた階層は、このようになっています。
同じ階層にいれています。

https://webcat.work/modal/からダウンロードしたJSがこちらです。
↓
ここの$を「jQuery」に直してみたりもしましたが、やはり上手くいきませんでした。

JS
1$("body").prepend('<div class="shinomodal_modal" style="position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100vh;  background-color: rgba(0, 0, 0, 0.8); z-index:9999; display: none;"><div class="shinomodal_bigimg" style="position: absolute;  width: 80%;  max-width: 600px;  top: 50%;  left: 50%;  transform: translateY(-50%) translateX(-50%);  -webkit-transform: translateY(-50%) translateX(-50%);"><img src="" style="width:100%"><a href="" class="shinomodal_btn" style="color: #fff;font-size: 28px;	position: absolute;	right: 0px;	top: -38px;text-decoration: none;">✖</a></div></div>');$(".shinomodal_baseimg").click(function(){var b=$(this).attr("src");$(".shinomodal_bigimg").children().attr("src",b);$(".shinomodal_modal").fadeIn();$("body,html").css("overflow-y","hidden");return false});$(".shinomodal_btn").click(function(){$(".shinomodal_modal").fadeOut();$("body,html").css("overflow-y","visible");return false});

functions.phpは、いじっていません。

何かアドバイス頂けましたら幸いです。
宜しくお願い致します。