<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery Navigation</title>
<style>
.image-gallery-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 20px auto;
}
.image-gallery {
width: 800px; /* Increased width */
max-height: 600px; /* Increased height */
overflow: hidden;
position: relative;
}
.image-gallery img {
width: 100%;
height: auto;
border-radius: 10px;
display: none;
}
.image-gallery img.active {
display: block;
}
.arrow {
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 2.5em;
color: #444; /* Darker color */
padding: 5px 15px;
transition: color 0.3s;
user-select: none;
transform: scaleX(0.7);
}
.arrow:hover {
color: #007bff; /* Color on hover */
}
.left-arrow {
left: 20px; /* Adjusted position */
}
.right-arrow {
right: 20px; /* Adjusted position */
}
.group-title {
font-weight: bold;
margin-top: 30px;
font-size: 1.2em;
}
</style>
</head>
<body>
<div class="image-gallery-container normal-gallery">
<span class="arrow left-arrow" onclick="navigateImages('normal', -1)"><</span>
<div class="image-gallery">
<img id="normalImage1" src="./demo_results/normal_1.png" class="active" alt="Normal Image 1">
<img id="normalImage2" src="./demo_results/normal_2.png" alt="Normal Image 2">
<img id="normalImage3" src="./demo_results/normal_3.png" alt="Normal Image 3">
<img id="normalImage4" src="./demo_results/normal_4.png" alt="Normal Image 4">
</div>
<span class="arrow right-arrow" onclick="navigateImages('normal', 1)">></span>
</div>
<div class="image-gallery-container attack-gallery">
<span class="arrow left-arrow" onclick="navigateImages('attack', -1)"><</span>
<div class="image-gallery">
<img id="attackImage1" src="./demo_results/attack_1.png" class="active" alt="Attack Image 1">
<img id="attackImage2" src="./demo_results/attack_2.png" alt="Attack Image 2">
<img id="attackImage3" src="./demo_results/attack_3.png" alt="Attack Image 3">
<img id="attackImage4" src="./demo_results/attack_4.png" alt="Attack Image 4">
</div>
<span class="arrow right-arrow" onclick="navigateImages('attack', 1)">></span>
</div>
<script>
let normalIndex = 0;
let attackIndex = 0;
function navigateImages(type, direction) {
let images;
let currentIndex;
// Determine which set of images to target and the current index
if (type === 'normal') {
images = document.querySelectorAll('.normal-gallery .image-gallery img');
currentIndex = normalIndex;
} else if (type === 'attack') {
images = document.querySelectorAll('.attack-gallery .image-gallery img');
currentIndex = attackIndex;
}
// Check if images were found to avoid accessing undefined elements
if (images && images.length > 0) {
// Hide current image
images[currentIndex].classList.remove('active');
// Calculate new index (modulo ensures cycling)
currentIndex = (currentIndex + direction + images.length) % images.length;
// Show new image
images[currentIndex].classList.add('active');
// Update index tracker
if (type === 'normal') {
normalIndex = currentIndex;
} else if (type === 'attack') {
attackIndex = currentIndex;
}
} else {
console.error("No images found for type:", type);
}
}
</script>
</body>
</html>