lightboxの実装とスクロール時にヘッダーがハンバーガーメニューに変わるようにしたい

Question

head内
 <!-- CSS -->
 <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
 <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="./slick/slick-theme.css">
 <link rel="stylesheet" href="./slick/slick.css">
 <link rel="stylesheet" href="./slick/lightbox.min.css">
 <link rel="stylesheet" href="portfolio.css">
　
body内該当タグ
 <header id="header">
 　　<div class="logo-size">
      <img src="images/logo-cafe_3.png">
    </div>
    <nav id="g-navi">
    　<ul>
      　<li><a href="#area-1">About</a></li>
        <li><a href="#area-2">Menu</a></li>
        <li><a href="#area-3">Access</a></li>
      </ul>
    </nav>
 </header>

<h2 class="common-title">Menu</h2>
  <ul class="gallery">
  　<li><a href="images/cafe-img_1.jpg" data-lightbox="gallery1" data-title="グループ1キャプション"><img src="images/cafe-img_1.jpg""></a></li>
   <li><a href="images/cafe-img_2.jpg" data-lightbox="gallery1" data-title="グループ1キャプション"><img src="images/cafe-img_2.jpg""></a></li>
   <li><a href="images/cafe-img_3.jpg" data-lightbox="gallery1" data-title="グループ1キャプション"><img src="images/cafe-img_3.jpg""></a></li>
   <li><a href="images/cafe-img_4.jpg" data-lightbox="gallery1" data-title="グループ1キャプション"><img src="images/cafe-img_4.jpg""></a></li>
   <li><a href="images/cafe-img_5.jpg" data-lightbox="gallery1" data-title="グループ1キャプション"><img src="images/cafe-img_5.jpg""></a></li>
   <li><a href="images/cafe-img_6.jpg" data-lightbox="gallery1" data-title="グループ1キャプション"><img src="images/cafe-img_6.jpg""></a></li>
 </ul>

body終了前
 <!-- JavaScript -->
 　　<!-- jQuery -->
    <script src="js/jquery-3.5.1.min.js"></script>
    <!-- プラグイン -->
　　 <script src="slick/lightbox.min.js"></script>
    <script src="slick/slick.min.js"></script>
    <script>
        $(".slider").slick({
            autoplay:true,
            autoplaySpeed:4000,
            dots:true,
        });
    </script>
    <!-- 自作のJavaScript -->
    <script src="js/script.js"></script>


以下、script.jsファイル内の記述

//スクロールをするとハンバーガーメニューに変化するための設定を関数でまとめる
function FixedAnime() {
	//ヘッダーの高さを取得
	var headerH = $('#header').outerHeight(true);
	var scroll = $(window).scrollTop();
	if (scroll >= headerH){//ヘッダーの高さ以上までスクロールしたら
			$('.openbtn').addClass('fadeDown');//.openbtnにfadeDownというクラス名を付与して
			$('#header').addClass('dnone');//#headerにdnoneというクラス名を付与
		}else{//それ以外は
			$('.openbtn').removeClass('fadeDown');//fadeDownというクラス名を除き
			$('#header').removeClass('dnone');//dnoneというクラス名を除く
		}
}

// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
	FixedAnime();//スクロールをするとハンバーガーメニューに変化するための関数を呼ぶ
});

// ページが読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function () {
	FixedAnime();//スクロールをするとハンバーガーメニューに変化するための関数を呼ぶ
});


//ボタンをクリックした際のアニメーションの設定
$(".openbtn").click(function () {//ボタンがクリックされたら
	$(this).toggleClass('active');//ボタン自身に activeクラスを付与し
    $("#header").toggleClass('panelactive');//ヘッダーにpanelactiveクラスを付与
});
$("#g-navi li a").click(function () {//ナビゲーションのリンクがクリックされたら
    $(".openbtn").removeClass('active');//ボタンの activeクラスを除去し
    $("#header").removeClass('panelactive');//ヘッダーのpanelactiveクラスも除去
});


//リンク先のidまでスムーススクロール
//※ページ内リンクを行わない場合は不必要なので削除してください
    $('#g-navi li a').click(function () {
	var elmHash = $(this).attr('href');
	var pos = $(elmHash).offset().top-0;
	$('body,html').animate({scrollTop: pos}, 1000);
	return false;
});

/* 6-2-1.js */
lightbox.option({
  'wrapAround': true,//グループ最後の写真の矢印をクリックしたらグループ最初の写真に戻る
  'albumLabel': ' %1 / total %2 '//合計枚数中現在何枚目かというキャプションの見せ方を変更できる
})

function fadeAnime(){
    // flipLeft
    $('.gallery li').each(function(){ 
        var elemPos = $(this).offset().top;
        var scroll = $(window).scrollTop();
        var windowHeight = $(window).height();
        if (scroll >= elemPos - windowHeight){
            $(this).addClass('flipLeft');
        }else{
            $(this).removeClass('flipLeft');
        }
    });
}

初心者です。
行えるようにしたいことは、ヘッダーがスクロールされるとハンバーガーメニューに切り替わり表示されるようにすることと、Menu内のlightboxをクリックした際に画像が浮かび上がるようにすることです。

現状、body終了前のscript.jsがない際は、lightboxの要素が浮かび上がることを確認していますが、この場合ですと、ハンバーガーメニューに切り替わる記述をしたscript.jsを読み込ませていない為、スクロール時の動きを確認できません。
また、この際に埋め込んだGoogle Mapもスワイプできるようになっていることも確認しています。
次にscript.jsを読み込ませた状態で開くと、ハンバーガーメニューは表示されるようになりますが、lightboxもGoogle Mapも動かなくなってしまいます。

どちらの動きも実装したいので、ご教示いただけますでしょうか。