A photo gallery made with HTML, CSS, and JavaScript allows you to display a collection of images on your website in an organized and visually appealing way. By utilizing HTML for the structure, CSS for styling, and JavaScript for interactivity, you can create a dynamic gallery where users can view images, navigate through them, and even enlarge them for a closer look.
To get a free source code for creating a photo gallery using HTML, CSS, and JavaScript, you can visit the website codeatnow.com. There, you will find the necessary code and resources to help you implement and customize your own photo gallery on your website.
Follow Us On Telegram Telegram link
HTML
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodeAtNow - Instant photo film gallery</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="Container">
<!-- last card -->
<div class="Picture">
<img class="Picture-img" src="./CODEATNOW.png" alt="" />
<div class="Picture-note"><span>@CodeAtNow - <a class="Network" href="https://codeatnow.com" target="_top"><img src="https://cdn-icons-png.flaticon.com/512/2111/2111501.png" alt="CodePen" /></a><a class="Network" href="https://codeatnow.com" target="_top"><img src="https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-logo-vector-png-clipart-1.png" alt="twitter" /></a></span></div>
</div>
<!-- other cards -->
<div class="Picture">
<img class="Picture-img" src="https://picsum.photos/id/733/400" alt="" />
<div class="Picture-note"><span>Over the clouds</span></div>
</div>
<div class="Picture">
<img class="Picture-img" src="https://picsum.photos/id/613/400" alt="" />
<div class="Picture-note"><span>Golden Gate Bridge - San Francisco</span></div>
</div>
<div class="Picture">
<img class="Picture-img" src="https://picsum.photos/id/40/400" alt="" />
<div class="Picture-note"><span>Cat nose</span></div>
</div>
<div class="Picture">
<img class="Picture-img" src="https://picsum.photos/id/465/400" alt="" />
<div class="Picture-note"><span>Mountain</span></div>
</div>
<div class="Picture">
<img class="Picture-img" src="https://picsum.photos/id/1029/400" alt="" />
<div class="Picture-note"><span>Central Park - New York</span></div>
</div>
<div class="Picture">
<img class="Picture-img" src="https://picsum.photos/id/923/400" alt="" />
<div class="Picture-note"><span>Autumn</span></div>
</div>
<div class="Picture">
<img class="Picture-img" src="https://picsum.photos/id/425/400" alt="" />
<div class="Picture-note"><span>Coffee</span></div>
</div>
<div class="Picture">
<img class="Picture-img" src="https://picsum.photos/id/200/400" alt="" />
<div class="Picture-note"><span>An Irish cow enjoying the wind on the beach</span></div>
</div>
<div class="Picture">
<img class="Picture-img" src="https://picsum.photos/id/244/400" alt="" />
<div class="Picture-note"><span>pelicans at the water's edge</span></div>
</div>
<div class="Picture">
<img class="Picture-img" src="https://picsum.photos/id/15/400" alt="" />
<div class="Picture-note"><span>Waterfall</span></div>
</div>
</div>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Caveat");
body{
background-color: #11131e;
}
.Container {
position: absolute;
top: 50%;
left: 50%;
/* background-color: #11131e; */
}
.Picture {
display: inline-block;
position: absolute;
top: 0;
left: 0;
border: 5px solid #fff;
border-radius: 3px;
background: #fff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
transform: translate(-50%, -50%);
user-select: none;
cursor: pointer;
}
.Picture-img {
display: block;
width: 300px;
height: 300px;
pointer-events: none;
}
.Picture-note {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 70px;
padding: 12px 24px;
font-size: 1.5rem;
text-align: center;
}
.Network {
display: inline-block;
padding: 0 5px;
}
.Network img {
width: 1.5rem;
aspect-ratio: 1 / 1;
vertical-align: middle;
}
/* --------------------- */
/* Other styles */
/* --------------------- */
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Caveat', serif;
overflow: hidden;
}
JS
const pictures = document.querySelectorAll('.Picture');
var previousTouch = undefined;
function updateElementPosition(element, event) {
var movementX, movementY;
if (event.type === 'touchmove') {
const touch = event.touches[0];
movementX = previousTouch ? touch.clientX - previousTouch.clientX : 0;
movementY = previousTouch ? touch.clientY - previousTouch.clientY : 0;
previousTouch = touch;
} else {
movementX = event.movementX;
movementY = event.movementY;
}
const elementY = parseInt(element.style.top || 0) + movementY;
const elementX = parseInt(element.style.left|| 0) + movementX;
element.style.top = elementY + "px";
element.style.left = elementX + "px";
}
function startDrag(element, event) {
const updateFunction = (event) => updateElementPosition(element, event);
const stopFunction = () => stopDrag({update: updateFunction, stop: stopFunction});
document.addEventListener("mousemove", updateFunction);
document.addEventListener("touchmove", updateFunction);
document.addEventListener("mouseup", stopFunction);
document.addEventListener("touchend", stopFunction);
}
function stopDrag(functions) {
previousTouch = undefined;
document.removeEventListener("mousemove", functions.update);
document.removeEventListener("touchmove", functions.update);
document.removeEventListener("mouseup", functions.stop);
document.removeEventListener("touchend", functions.stop);
}
pictures.forEach(picture => {
const range = 100;
const randomX = Math.random() * (range * 2) - range;
const randomY = Math.random() * (range * 2) - range;
const randomRotate = Math.random() * (range / 2) - range / 4;
const startFunction = (event) => startDrag(picture, event);
picture.style.top = `${randomY}px`;
picture.style.left = `${randomX}px`;
picture.style.transform = `translate(-50%, -50%) rotate(${randomRotate}deg)`;
picture.addEventListener("mousedown", startFunction);
picture.addEventListener("touchstart", startFunction);
});
