Semi Auto Image Gallery
Usage
<![CDATA[
<!DOCTYPE html>
<head>
<script src="make_gallery.js"></script>
<link rel="stylesheet" href="style_gallery.css">
</head>
<body>
<div id="gallery">
<!-- Gallery will be generated here -->
</div>
<script>
images = ['buildings.jpg', 'cabinet.jpg', 'city_panorama.jpg',
'cabinet.jpg', 'mountain.jpg', 'window-on-wall.jpg',
'cabinet.jpg', 'mountain.jpg', 'buildings.jpg']
// (gallery_div_id, image_folder, image_file_names)
make_gallery('gallery', 'images', images)
</script>
</body>
]]><![CDATA[
// JS (make_gallery.js):
function make_gallery(div_id, folder, images){
let html_gallery = ''
let img_folder = folder
if (folder.slice(-1) != '/'){
img_folder += '/'
}
images.forEach(img =>{
alt = img.split('.')[0]
caption = alt.charAt(0).toUpperCase() + alt.slice(1)
caption = caption.replace(/-|_/g,' ');
html_gallery += `
<figure>
<img src="${img_folder}${img}" alt="${caption}" title="${caption}">
<figcaption>${caption}
</figcaption>
</figure>
`
});
document.getElementById(div_id).innerHTML = html_gallery;
document.getElementById(div_id).setAttribute('class', 'auto_gallery')
}
]]><![CDATA[
/* CSS (style_gallery.css): */
.auto_gallery {
padding-top: 1em;
display: flex;
flex-wrap: wrap;
justify-content: center;
background-color: #222;
gap: 15px;
}
.auto_gallery figure{
display:flex;
flex-direction:column;
width: min-content;
margin: 0;
}
.auto_gallery img{
max-height: 250px;
object-fit: contain;
max-width: 90vw;
}
.auto_gallery figcaption{
color: white;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
max-width: 100vw;
padding-top: 0.5em;
padding-bottom: 1em;
}
@media screen and (max-width: 800px) {
.auto_gallery img{
max-height: 90vh;
}
}
]]>