intial commit
This commit is contained in:
Brandon4466
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
images/
|
||||
Download_All_Photos.zip
|
||||
web.config
|
||||
129
index.html
Normal file
129
index.html
Normal file
@@ -0,0 +1,129 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Christiana Varner - Portland State University - Graduation 2025</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
.gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 15px;
|
||||
padding: 20px;
|
||||
}
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1 style="text-align:center;">Christiana Varner - Portland State University - Graduation 2025</h1>
|
||||
<a href="Download_All_Photos.zip" id="download-all" style="position:fixed;top:20px;left:20px;z-index:1000;display:inline-block;padding:8px 16px;background:#0078d4;color:#fff;text-decoration:none;border-radius:4px;font-weight:bold;">Download All</a>
|
||||
<button id="select-images" style="position:fixed;top:20px;left:160px;z-index:1000;display:inline-block;padding:8px 16px;background:#0078d4;color:#fff;border:none;border-radius:4px;font-weight:bold;cursor:pointer;">Select</button>
|
||||
<div class="gallery" id="gallery"></div>
|
||||
|
||||
<script>
|
||||
const gallery = document.getElementById('gallery');
|
||||
const selectBtn = document.getElementById('select-images');
|
||||
let downloadBtn = null;
|
||||
|
||||
fetch('list-images.php')
|
||||
.then(response => response.json())
|
||||
.then(images => {
|
||||
images.forEach((imgObj, idx) => {
|
||||
// Container for image and checkbox
|
||||
const itemDiv = document.createElement('div');
|
||||
itemDiv.style.position = 'relative';
|
||||
|
||||
// Checkbox (hidden by default)
|
||||
const checkbox = document.createElement('input');
|
||||
checkbox.type = 'checkbox';
|
||||
checkbox.className = 'img-checkbox';
|
||||
checkbox.style.position = 'absolute';
|
||||
checkbox.style.top = '8px';
|
||||
checkbox.style.left = '8px';
|
||||
checkbox.value = imgObj.full;
|
||||
checkbox.style.display = 'none';
|
||||
|
||||
// Image link
|
||||
const link = document.createElement('a');
|
||||
link.href = imgObj.full;
|
||||
link.target = '_blank';
|
||||
const img = document.createElement('img');
|
||||
img.src = imgObj.thumb;
|
||||
img.alt = imgObj.full;
|
||||
link.appendChild(img);
|
||||
|
||||
// Make image clickable for selection in select mode
|
||||
itemDiv.addEventListener('click', function(e) {
|
||||
// Only toggle if in select mode (checkboxes visible)
|
||||
if (checkbox.style.display === 'block') {
|
||||
// Prevent link from opening when selecting
|
||||
if (e.target === img || e.target === itemDiv) {
|
||||
checkbox.checked = !checkbox.checked;
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
itemDiv.appendChild(checkbox);
|
||||
itemDiv.appendChild(link);
|
||||
gallery.appendChild(itemDiv);
|
||||
});
|
||||
|
||||
// Add select button logic
|
||||
selectBtn.addEventListener('click', () => {
|
||||
// Show checkboxes
|
||||
document.querySelectorAll('.img-checkbox').forEach(cb => {
|
||||
cb.style.display = 'block';
|
||||
});
|
||||
// Hide select button
|
||||
selectBtn.style.display = 'none';
|
||||
// Create and show download selected button
|
||||
downloadBtn = document.createElement('button');
|
||||
downloadBtn.id = 'download-selected';
|
||||
downloadBtn.textContent = 'Download Selected';
|
||||
downloadBtn.style.position = 'fixed';
|
||||
downloadBtn.style.top = '20px';
|
||||
downloadBtn.style.left = '160px';
|
||||
downloadBtn.style.zIndex = '1000';
|
||||
downloadBtn.style.display = 'inline-block';
|
||||
downloadBtn.style.padding = '8px 16px';
|
||||
downloadBtn.style.background = '#0078d4';
|
||||
downloadBtn.style.color = '#fff';
|
||||
downloadBtn.style.border = 'none';
|
||||
downloadBtn.style.borderRadius = '4px';
|
||||
downloadBtn.style.fontWeight = 'bold';
|
||||
downloadBtn.style.cursor = 'pointer';
|
||||
document.body.appendChild(downloadBtn);
|
||||
|
||||
downloadBtn.addEventListener('click', () => {
|
||||
const selected = Array.from(document.querySelectorAll('.img-checkbox:checked'));
|
||||
if (selected.length === 0) {
|
||||
alert('Please select at least one image to download.');
|
||||
return;
|
||||
}
|
||||
selected.forEach(checkbox => {
|
||||
const link = document.createElement('a');
|
||||
link.href = checkbox.value;
|
||||
link.download = checkbox.value.split('/').pop();
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
});
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
gallery.innerHTML = '<p style="color:red;">Could not load images.</p>';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
24
list-images.php
Normal file
24
list-images.php
Normal file
@@ -0,0 +1,24 @@
|
||||
<?php
|
||||
$dir = __DIR__ . '/images/';
|
||||
$thumbDir = $dir . 'thumbnails/';
|
||||
$extensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'];
|
||||
$images = [];
|
||||
|
||||
if (is_dir($dir)) {
|
||||
foreach (scandir($dir) as $file) {
|
||||
$ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
|
||||
if (in_array($ext, $extensions)) {
|
||||
$thumbPath = 'images/thumbnails/' . $file;
|
||||
$fullPath = 'images/' . $file;
|
||||
// Check if thumbnail exists
|
||||
if (file_exists($thumbDir . $file)) {
|
||||
$images[] = ['thumb' => $thumbPath, 'full' => $fullPath];
|
||||
} else {
|
||||
$images[] = ['thumb' => $fullPath, 'full' => $fullPath];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
header('Content-Type: application/json');
|
||||
echo json_encode($images);
|
||||
?>
|
||||
Reference in New Issue
Block a user