مقدمه
در دنیای دیجیتال امروز، وب‌گالری‌های تصاویر به عنوان یک ابزار بسیار جذاب و کارآمد برای نمایش آثار هنری، عکس‌های خانوادگی، یا محصولات تجاری شناخته می‌شوند. این گالری‌ها می‌توانند به سادگی با استفاده از HTML، CSS و JavaScript ساخته شوند. در اینجا، به بررسی یک نمونه اسکریپت برای ایجاد یک وب‌گالری تصاویر می‌پردازیم.
ساختار HTML
ابتدا باید ساختار HTML را ایجاد کنیم. این شامل تگ‌های پایه‌ای مانند `<html>`, `<head>`, و `<body>` است. در زیر یک نمونه از ساختار HTML برای گالری تصاویر آورده شده است:
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
- 0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="gallery">
<img src="image
- jpg" alt="تصویر ۱">
- jpg" alt="تصویر ۲">
- jpg" alt="تصویر ۳">
</div>
<script src="script.js"></script>
</body>
</html>
```
استایل CSS
برای زیباسازی گالری، به CSS نیاز داریم. این استایل‌ها موجب می‌شوند که تصاویر به صورت منظم و زیبا نمایش داده شوند. در زیر یک نمونه از CSS آورده شده است:
```css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 20px;
}
.gallery img {
margin: 10px;
max-width: 300px;
height: auto;
transition: transform
- 2s;
.gallery img:hover {
transform: scale(
- 1);
```
عملکرد JavaScript
در نهایت، برای افزودن برخی از ویژگی‌های تعاملی، می‌توان از JavaScript استفاده کرد. به عنوان مثال، می‌توانیم یک اسکریپت برای بزرگ‌نمایی تصویر در هنگام کلیک بنویسیم:
```javascript
const images = document.querySelectorAll('.gallery img');
images.forEach(image => {
image.addEventListener('click', () => {
const src = image.src;
const modal = document.createElement('div');
modal.classList.add('modal');
modal.innerHTML = `<img src="${src}" alt="بزرگ‌نمایی">`;
document.body.appendChild(modal);
modal.addEventListener('click', () => {
modal.remove();
});
});
});
```
نتیجه‌گیری
با این اسکریپت ساده، شما می‌توانید یک وب‌گالری تصاویر زیبا و کاربرپسند بسازید. این گالری می‌تواند با افزودن ویژگی‌های بیشتر، مانند فیلترها یا انیمیشن‌ها، توسعه یابد. مهم‌تر از همه، گالری‌های تصاویر می‌توانند به شما کمک کنند تا آثار خود را به بهترین شکل ممکن به نمایش بگذارید. اگر سوالی دارید یا به راهنمایی بیشتری نیاز دارید، خوشحال می‌شوم که کمک کنم!
