Spaces:
Running
Running
File size: 4,277 Bytes
76573ca d0b312f 2ab3dac 76573ca d589701 76573ca e11742b 76573ca e11742b 76573ca e11742b 76573ca e11742b 15af5c3 e11742b 76573ca e11742b 76573ca |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 |
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画像ダウンロード</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
padding: 20px;
}
.image-box {
border: 2px solid #ddd;
border-radius: 10px;
padding: 15px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 300px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.image-box:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.image-box img {
height: 100px;
width: auto;
border-radius: 5px;
object-fit: cover;
}
.download-button, .copy-button {
margin-top: 10px;
display: inline-block;
padding: 12px 25px;
background-color: #4CAF50;
color: white;
text-decoration: none;
border-radius: 25px;
font-size: 16px;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.copy-button{
background-color: #4287f5 !important;
cursor: pointer;
}
.download-button:hover, .copy-button:hover {
background-color: #45a049;
transform: translateY(-2px);
}
#loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: #333;
z-index: 1000;
transition: opacity 1s ease, visibility 1s ease; /* フェードアウトのためのスタイル */
}
#loading.hidden {
opacity: 0;
visibility: hidden;
}
</style>
</head>
<body>
<!-- ローディング表示 -->
<div id="loading">Loading...</div>
<script>
let number = 60; // 画像の数
let imagesLoaded = 0; // 読み込まれた画像の数
for (let i = 1; i <= number; i++) {
let imageBox = document.createElement('div');
imageBox.className = 'image-box';
let img = document.createElement('img');
img.src = location.origin + "/marker/" + i + ".png";
img.alt = "画像";
img.onload = function() {
imagesLoaded++;
if (imagesLoaded === number) {
setTimeout(function() {
document.getElementById('loading').classList.add('hidden');
}, 500);
}
};
// ダウンロードリンクを作成（ループ内に配置）
let downloadLink = document.createElement('a');
downloadLink.href = img.src; // 画像のURLを直接指定
downloadLink.download = 'marker_' + i + '.png';
downloadLink.className = 'download-button';
downloadLink.textContent = 'ダウンロード';
// コピーリンクボタンを作成（ループ内に配置）
let copyButton = document.createElement('button');
copyButton.className = 'copy-button';
copyButton.textContent = 'URLをコピー';
copyButton.onclick = function() {
navigator.clipboard.writeText(img.src).then(function() {
alert('URLがコピーされました: \n' + img.src);
}).catch(function(err) {
alert('コピーに失敗しました: ' + err);
});
};
// 各要素を `imageBox` に追加
imageBox.appendChild(img);
imageBox.appendChild(document.createElement('br'));
imageBox.appendChild(downloadLink);
imageBox.appendChild(document.createElement('br'));
imageBox.appendChild(copyButton);
// `body` に `imageBox` を追加
document.body.appendChild(imageBox);
}
</script>
</body>
</html>
|