پروژه عکس با HTML5 و جاوا اسکریپت
در دنیای وب، ایجاد یک گالری عکس جذاب و تعاملی می‌تواند به جذابیت سایت شما کمک شایانی کند. استفاده از HTML5 و جاوا اسکریپت، ابزاری قدرتمند برای توسعه چنین پروژه‌ای است.
طراحی ساختار HTML
اولین قدم در این پروژه، طراحی ساختار 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>
<header>
<h1>گالری عکس من</h1>
</header>
<div class="gallery">
<img src="image
- jpg" alt="عکس 1">
- jpg" alt="عکس 2">
</div>
<script src="script.js"></script>
</body>
</html>
```
استفاده از CSS برای زیباسازی
بعد از طراحی ساختار HTML، نوبت به زیباسازی می‌رسد. با استفاده از CSS می‌توانید به تصاویر سایه، حاشیه، و افکت‌های زیبایی اضافه کنید. به عنوان مثال:
```css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gallery img {
width: 200px;
height: auto;
margin: 10px;
transition: transform
- 2s;
.gallery img:hover {
transform: scale(
- 1);
```
افزودن تعامل با جاوا اسکریپت
حالا، برای ایجاد تعاملات بیشتر، می‌توانید از جاوا اسکریپت استفاده کنید. به عنوان مثال، با کلیک بر روی تصاویر می‌توانید یک پنجره بزرگنمایی باز کنید:
```javascript
const images = document.querySelectorAll('.gallery img');
images.forEach(image => {
image.addEventListener('click', () => {
const modal = document.createElement('div');
modal.className = 'modal';
const img = document.createElement('img');
img.src = image.src;
modal.appendChild(img);
document.body.appendChild(modal);
modal.addEventListener('click', () => {
document.body.removeChild(modal);
});
});
});
```
نتیجه‌گیری
ایجاد یک پروژه عکس با HTML5 و جاوا اسکریپت نه تنها به شما کمک می‌کند تا مهارت‌های وب‌سایت‌سازی خود را تقویت کنید، بلکه می‌تواند به عنوان یک نمونه کار عالی برای به نمایش گذاشتن توانایی‌های شما نیز عمل کند. با اضافه کردن ویژگی‌های بیشتر، مثل فیلتر کردن تصاویر یا بارگذاری تصاویر از سرور، می‌توانید پروژه خود را حتی بیشتر توسعه دهید.
به این ترتیب، شما یک گالری عکس تعاملی و جذاب خواهید داشت.
