ساخت گالری عکس با جاوا اسکریپت و HTML، CSS
ساخت یک گالری عکس ساده با استفاده از HTML، CSS و جاوا اسکریپت یک راه عالی برای یادگیری اصول اولیه توسعه وب است. در این گالری تصویری که قصد ساختنش را داریم ، می‌توانید با انتخاب ریز عکسها برای بزرگ‌نمایی تصویر در صفحه وب، تصاویر را ورق بزنید.
برای ایجاد گالری، می توانید از HTML جهت اضافه کردن محتوای صفحه وب و CSS برای اضافه کردن یک ظاهر زیبا استفاده کنید. شما می توانید از جاوا اسکریپت برای تعاملی کردن گالری زمانی که کاربر روی هر یک از تصاویر کوچک کلیک می کند استفاده کنید.
نحوه ایجاد رابط کاربری برای گالری عکس
با استفاده از HTML و CSS، رابط کاربری گالری تصاویر را اضافه کنید. این شامل افزودن یک تصویر بزرگ در مرکز صفحه وب است که بر اساس تصویر کوچک انتخاب شده تغییر خواهد کرد. همچنین می توانید نمونه کامل کد منبع این پروژه را در GitHub مشاهده کنید. “کلیک کنید“
۱. یک فایل جدید به نام “index.html” ایجاد کنید.
۲. در داخل این فایل، ساختار اصلی کد HTML را اضافه کنید:
<!doctype html> <html lang="en-US"> <head> <title>Image Gallery</title> </head> <body> <div class="intro"> <h2>Image Gallery</h2> <p>Select a thumbnail below to view the image</p> </div> </body> </html>
۳. یک زیر پوشه به نام “images” ایجاد کنید. آن را با چندین تصویر پر کنید و آنها را از “image1.jpg” تا “image10.jpg” نامگذاری کنید.
۴. در فایل HTML خود، یک div برای گالری تصاویر اضافه کنید:
<div id="image-gallery"> </div>
۵. در قسمت گالری تصاویر، یک تگ تصویر اضافه کنید تا تصویر انتخاب شده بزرگ شده نمایش داده شود. به طور پیش فرض، اولین تصویر را در پوشه “images” نمایش دهید:
<img id="current-image" src="images/image1.jpg" alt="Image 1">
۶. در همان پوشه فایل HTML خود، یک فایل جدید به نام “styles.css” با CSS زیر اضافه کنید. می توانید CSS را با کمی خلاقیت تغییر دهید .
.intro {
text-align: center;
font-family: Arial;
}
h2 {
font-size: 36px;
}
p {
font-size: 14pt;
}
#image-gallery {
width: 600px;
margin: 0 auto;
}
#current-image {
width: 100%;
}
یک پیوند به فایل CSS خود در تگ head فایل HTML خود اضافه کنید:
<link rel="stylesheet" type="text/css" href="styles.css">
نحوه اضافه کردن ریز عکسها برای سایر تصاویر در گالری
در حال حاضر، گالری تصاویر فقط اولین تصویر را نمایش می دهد. در زیر تصویر انتخاب شده، فهرستی از تصاویر کوچک اضافه کنید. این ریز عکسها پیش نمایشی از تمام تصاویر داخل پوشه “images” را نمایش می دهند.
۱. در داخل گالری تصاویر در فایل HTML، یک div دیگری برای نمایش ریز عکسها برای سایر تصاویر اضافه کنید:
<div id="image-thumbs"></div>
۲. در داخل فایل CSS، یک سبک برای لیست ریز عکسها اضافه کنید:
#image-thumbs {
display: flex;
justify-content: center;
margin-top: 20px;
}
۳. در همان پوشه فایل های HTML و CSS خود، یک فایل جدید به نام “script.js” اضافه کنید.
۴. یک پیوند به فایل جاوا اسکریپت خود در پایین تگ بدنه HTML اضافه کنید:
<body> <!-- Your code here --> <script src="script.js"></script> </body>
۵. در داخل فایل جاوا اسکریپت، عنصر div HTML را دریافت کنید که لیست ریز عکسها را ذخیره می کند:
var imageThumbs = document.getElementById("image-thumbs");
۶. برای چرخش هر یک از ۱۰ تصویر در گالری، یک حلقه for اضافه کنید:
for (var i = 1; i <= 10; i++) {
}
۷. در داخل حلقه، یک عنصر img جدید برای هر تصویر ایجاد کنید:
var thumb = document.createElement("img");
۸. برای ویژگی های “src” و “alt” مقادیر اضافه کنید. در آموزش ما، ویژگی “src” مسیر فایل به تصویر در همان فهرست داخل پوشه “images” است:
thumb.src = "images/image" + i + ".jpg"; thumb.alt = "Image " + i;
۹. در داخل فایل CSS خود، یک کلاس جدید برای استایل دادن به تصویر کوچک تصویر اضافه کنید. همچنین می‌توانید سایر سبک‌های شناور یا انتقالی CSS را برای تصاویر کوچک اضافه کنید تا وبسایت خود واکنش‌گرا و تعاملی باشد.
.thumb {
width: 80px;
height: 80px;
object-fit: cover;
margin-right: 10px;
cursor: pointer;
}
۱۰. در داخل فایل جاوا اسکریپت، کلاس بالا را به تصویر کوچک جدید اضافه کنید:
thumb.classList.add("thumb");
۱۱. تصویر کوچک جدید را به عنصر HTML که حاوی لیست ریز عکسها است اضافه کنید:
imageThumbs.appendChild(thumb);
نحوه تغییر تصویر هنگامی که کاربر روی یک تصویر کوچک کلیک می کند
وقتی کاربر روی یکی از ریز عکسها کلیک می کند، تصویر بزرگ شده در مرکز صفحه را به تصویر انتخابی تغییر میدهید. می توانید این قابلیت را در فایل جاوا اسکریپت اضافه کنید.
۱. در بالای فایل جاوا اسکریپت، عنصر HTML تصویر انتخاب شده فعلی را دریافت کنید:
var currentImage = document.getElementById("current-image");
۲. در داخل حلقه for، یک کنترل کننده رویداد اضافه کنید که وقتی کاربر هر یک از تصاویر کوچک را در پایین صفحه انتخاب می کند، فعال می شود:
thumb.addEventListener(
"click", function() {
}
);
۳. در کنترل کننده رویداد، ویژگی “src” تصویر فعلی را به تصویر تازه انتخاب شده تغییر دهید. همچنین می توانید ویژگی “alt” را به روز کنید:
currentImage.src = this.src; currentImage.alt = this.alt;
۴. روی فایل “index.html” کلیک کنید تا در یک مرورگر وب باز شود.
۵. برای مشاهده تصویر، یکی از عکسهای کوچک را انتخاب کنید.
به گسترش دانش جاوا اسکریپت خود ادامه دهید
صرف نظر از تجربه شما، مهم است که به ساختن پروژه ها ادامه دهید تا دانش خود را گسترش دهید. علاوه بر ساخت گالری عکس با جاوا اسکریپت ، به کاوش در پروژه های دیگر مانند ساخت یک ساخت تقویم، ماشین حساب، یا بازی دوز ادامه دهید.
دیدگاه ها