mtb_album_frontend/public/static/js/script.js

$(document).ready(function() {

	new WOW({
		mobile: false,
		animateClass: 'animate__animated', 
	}).init();

	setTimeout(function() {
		$('.prelodaer-wrap').fadeOut('slow');
	}, 4500);

	//Ajax Form Send START
	$('#contact-form').on('submit', function() { 
		var th = $(this);
		$.ajax({
			type: 'POST',
			url: 'mail.php',
			data: th.serialize(),
			success: function() {
				th.trigger('reset');
				$('.input-field').removeClass('is-active');
				$.magnificPopup.open({
					items: {
						src: '<div class="form-alert"><p>Your application has been successfully sent. <br> Expect a call!</p></div>',
						type: 'inline'
					}
				});
			},
			error: function() {
				th.trigger('reset');
				$('.input-field').removeClass('is-active');
				$.magnificPopup.open({
					items: {
						src: '<div class="form-alert"><p>An error occurred, please try again</p></div>',
						type: 'inline'
					}
				});
			}
		});
		return false;
	});
	//Ajax Form Send END

	// Banner START
	const swiperBanner = new Swiper('.swiper-banner', {
		speed: 800,
		spaceBetween: 100,
		effect: 'fade',
			fadeEffect: {
				crossFade: true
		},
		navigation: {
			nextEl: '.swiper-banner .swiper-button-next',
			prevEl: '.swiper-banner .swiper-button-prev',
		},
		scrollbar: {
			el: '.swiper-banner .swiper-scrollbar',
			enabled: true,
			draggable: true
		},
	});
	// Banner END
	

	// Menu START
	$('body').on('click', '.hamburger-button', function(e) {
		e.preventDefault();
		hamburgerButton = $('.hamburger-button');
		hamburgerMenuWrap = $('.menu-wrap');
		hamburgerMenuItem = $('.menu-nav');

		hamburgerMenuWrap.addClass('menu-active');
		hamburgerMenuItem.addClass('menu-item-active');
		menuOverlay = $('.menu-overlay');
		menuOverlay.addClass('menu-overlay__active');
	});

	$(document).on('mouseup', function(e) {
		e.preventDefault();
		menuClose = $('.menu-close');
		hamburgerMenuWrap = $('.menu-wrap');
		hamburgerMenuItem = $('.menu-nav');
		menuOverlay = $('.menu-overlay');

		if (!hamburgerMenuWrap.is(e.target) && hamburgerMenuWrap.has(e.target).length === 0) {
			hamburgerMenuWrap.removeClass('menu-active');
			hamburgerMenuItem.removeClass('menu-item-active');
			menuOverlay.removeClass('menu-overlay__active');
		}

		menuClose.on('mousedown', function() {
			hamburgerMenuWrap.removeClass('menu-active');
			hamburgerMenuItem.removeClass('menu-item-active');
			menuOverlay.removeClass('menu-overlay__active');
		});
	});
	// Menu END


	// Contact START
	$('.input-field input, textarea').on('input', function() {
		var inputValue = $(this).val();
		var inputpParent = $(this).parent('.input-field');
		if (inputValue.length > 0) {
		  inputpParent.addClass('is-active');
		} else {
		  inputpParent.removeClass('is-active');
		}
	  });
	// Contact END

	// Gallery Single page START
	$('.grid-single .grid-item img').parazoom({
		customCursorIcon: 'images/magnify.svg',
    	customCursorSize: '30px',
		transitionTime: '1s',
    	transitionTimeLeave: '1s'
	});

	var $grid = $('.grid-single').masonry({
		itemSelector: '.grid-single .grid-item',
		percentPosition: true,
		columnWidth: '.grid-single .grid-sizer'
	});
	$grid.imagesLoaded().progress( function() {
		$grid.masonry({
			gutter: 15
		});
	});

	$('.grid-single .grid-item a').magnificPopup({
		type:'image',
		removalDelay: 500,
		gallery: {
			enabled: true
		},
		callbacks: {
			beforeOpen: function() {
				this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
				this.st.mainClass = this.st.el.attr('data-effect');
			}
		},
	});
	// Gallery Single page END

	// Album page START
	function albumMasonry() {
		var $gridAlbum = $('.grid-album').masonry({
			itemSelector: '.grid-album .grid-item',
			percentPosition: true,
			columnWidth: '.grid-album .grid-sizer'
		});
		$gridAlbum.imagesLoaded().progress( function() {
			$gridAlbum.masonry({
				gutter: 20
			});
		});
	}
	albumMasonry();

	var bLazy = new Blazy();
	$('.album-tab a').on('click', function(e) {
		e.preventDefault();
		var href = $(this).attr('href');
		$('.album-tab a').removeClass('is-active');
		$(this).addClass('is-active');

		$('.grid-album').removeClass('is-active');
		$(href).addClass('is-active');

		$(href).addClass('animate__animated animate__slideInUp');
		$('.grid-album.is-active:not(' + href + ')').removeClass('animate__animated animate__slideInUp');

		albumMasonry();
	});
	// Album page END


	// Settings START
	$('.settings-btn').on('click', function() {
		var settings = $('.settings-wrap');
		settings.toggleClass('is-active');
	});
	var savedColor = localStorage.getItem('boxColor');
	if (savedColor) {
		$(':root').css('--color-def', savedColor);
	}
	$('.settings-color-item').on('click', function() {
		var color = $(this).css('background-color');
		$('.settings-color-item').css('border-color', '#fff');
		$(this).css('border-color', color);
		$(':root').css('--color-def', color);
		localStorage.setItem('boxColor', color);
	});
	// Settings END

	// 当鼠标经过 li 元素时
	// $('.menu-nav li').hover(
	// 	function() {
	// 		// 显示子菜单
	// 		$(this).find('.menu-nav-son').stop(true, true).slideDown(200);
	// 	},
	// 	function() {
	// 		// 隐藏子菜单
	// 		$(this).find('.menu-nav-son').stop(true, true).slideUp(0);
	// 	}
	// );
	$('.menu-nav li').hover(
		function () {
			// 显示当前 li 的子菜单
			$(this).find('.menu-nav-son').stop(true, true).slideDown(200);
		}
	);

	// 当鼠标离开 .menu-nav ul 时
	$('.menu-nav').mouseleave(function () {
		// 隐藏所有子菜单
		$('.menu-nav-son').stop(true, true).slideUp(200);
	});


	// 创建全屏遮罩层
	$('.album-thumb').on('click', function (event) {
		// 如果点击的是 download-icon，阻止后续代码执行
		if ($(event.target).closest('.download-icon').length) {
			return;
		}

		// 获取当前点击的 .album-thumb 的父级 .grid-album 元素
		var $parentAlbum = $(this).closest('.grid-album');

		// 获取当前父级下所有 .album-thumb img 的 src
		var imageSrcArray = [];
		$parentAlbum.find('.album-thumb img').each(function () {
			console.log($(this).attr('class'));
			imageSrcArray.push($(this).attr('src'));
		});

		// 获取当前点击图片在数组中的索引
		var $albumThumbs = $parentAlbum.find('.album-thumb');
		var currentImageIndex = $albumThumbs.index(this);
		// console.log(currentImageIndex);

		const $fullscreenMask = $('<div>').addClass('fullscreen-mask');
		const $fullscreenImg = $('<img>').attr('src', imageSrcArray[currentImageIndex]);
		const $btnLeft = $('<div>').addClass('fullscreen-btn fullscreen-btn-left').html('&lt;');
		const $btnRight = $('<div>').addClass('fullscreen-btn fullscreen-btn-right').html('&gt;');

		$fullscreenMask.append($fullscreenImg, $btnLeft, $btnRight);

		// 将遮罩层添加到 body
		$('body').append($fullscreenMask);
		setTimeout(function () {
			$fullscreenMask.addClass('active');
		}, 10);

		// 点击遮罩层时关闭
		$fullscreenMask.on('click', function (e) {
			if (!$(e.target).is($btnLeft) && !$(e.target).is($btnRight)) {
				$fullscreenMask.removeClass('active');
				setTimeout(function () {
					$fullscreenMask.remove();
				}, 300);
			}
		});

		// 点击左按钮显示上一张图片
		$btnLeft.on('click', function () {
			currentImageIndex--;
			if (currentImageIndex < 0) {
				currentImageIndex = imageSrcArray.length - 1;
			}
			$fullscreenImg.attr('src', imageSrcArray[currentImageIndex]);
		});

		// 点击右按钮显示下一张图片
		$btnRight.on('click', function () {
			currentImageIndex++;
			if (currentImageIndex >= imageSrcArray.length) {
				currentImageIndex = 0;
			}
			$fullscreenImg.attr('src', imageSrcArray[currentImageIndex]);
		});
	});


	const $overlay = $('#overlay');
	const $videoPlayer = $('#videoPlayer');
	const $closeBtn = $('#closeBtn');
	const $videoBtns = $('.video-btn');

	// 点击播放按钮
	$videoBtns.on('click', function() {
		const videoSrc = $(this).data('src'); // 获取 data-src 属性
		$videoPlayer.attr('src', videoSrc); // 设置视频源
		$overlay.css('display', 'flex'); // 显示遮罩层
	});

	// 点击关闭按钮
	$closeBtn.on('click', function() {
		$videoPlayer[0].pause(); // 暂停视频
		$videoPlayer.attr('src', ''); // 清空视频源
		$overlay.hide(); // 隐藏遮罩层
	});

	// 点击遮罩层关闭
	$overlay.on('click', function(event) {
		if (event.target === $overlay[0]) { // 判断是否点击的是遮罩层本身
			$videoPlayer[0].pause(); // 暂停视频
			$videoPlayer.attr('src', ''); // 清空视频源
			$overlay.hide(); // 隐藏遮罩层
		}
	});

	// 为 .log-date 绑定点击事件
	$('.log-date').on('click', function() {
		// 找到当前 .log-date 的同级 .log-line 元素
		$(this).siblings('.log-line').toggleClass('active');
	});

});