آموزش ساخت گالری عکس
سلام خدمت همه دوستان عزیز و همراهان نت کپی، با یک پست آموزشی از سری پست های آموزش رایگان برنامه نویسی در خدمت شما هستیم با آموزش ساخت گالری عکس
پس در ادامه این آموزش همراه باشید
با آموزش ساخت گالری عکس در خدمت شما هستیم
ابتدا یک فایل با نام index.html میسازیم و کد های زیر را داخلش قرار میدیم
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>نت کپی - مرجع قالب و اسکریپت فارسی</title> <link rel="stylesheet" href="style.css"> </head> <body> <section> <div class="item show"> <img src="img/1.jpg" alt="img"> <div class="caption"> <h2>لورم ایپسوم متن ساختگی با تولید سادگی </h2> <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است </p> </div> </div> <div class="item"> <img src="img/2.jpg" alt="img"> <div class="caption"> <h2>لورم ایپسوم متن ساختگی با تولید سادگی </h2> <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است </p> </div> </div> <div class="item"> <img src="img/3.jpg" alt="img"> <div class="caption"> <h2>لورم ایپسوم متن ساختگی با تولید سادگی </h2> <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است </p> </div> </div> <div class="item"> <img src="img/4.jpg" alt="img"> <div class="caption"> <h2>لورم ایپسوم متن ساختگی با تولید سادگی </h2> <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است </p> </div> </div> </section> <script> const items = document.querySelectorAll('.item'); items.forEach(item => { item.addEventListener('click', () => { items.forEach(item => item.classList.remove('show')); item.classList.add('show'); }) }) </script> </body> </html>
سپس یک فایل با نام style.css میسازیم و کد هایی Css زیر را داخلش قرار میدیم
@font-face { font-family: "Vazir"; src: url(Vazir-Regular.ttf); } * { padding: 0; margin: 0; box-sizing: border-box; } body { font-size: 18px; font-family: "Vazir"; } img { width: 100%; height: 100%; object-fit: cover; } section { height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; } .item { height: 100%; width: 100%; flex: 1; transition: 0.3s ease flex; position: relative; cursor: pointer; overflow: hidden; } .caption { position: absolute; right: 0px; bottom: 50px; color: #000; opacity: 0; transition: 0.3s ease opacity; background-color: rgba(255, 225, 225, 0.404); padding: 30px; margin: 20px; border-radius: 8px; text-align: right; } .item.show { flex: 8; } .item.show .caption { opacity: 1; } @media only screen and (max-width: 768px) { section { flex-direction: column; } .item { flex: 1; height: 100px; } .item.show { flex: 10; } body { font-size: 14px; } }
شما میتونید عکس های دلخواهتون را در پوشه img قرار بدید
ما در این آموزش از فونت زیبای وزیر یک فونت رایگان هستش استفاده کردیم شما میتونید از هر فونتی
که مد نظرتون هست استفاده کنید برای تغییر فونت کافیست کد های مربوط به فونت را عوض کنید
و فونت دلخواه خودتون رو قرار بدید.
به همین سادگی ما تونستیم یک گالری عکس زیبا طراحی کنیم امید وارم خوشتون اومده باشه 🙂
نظرات و پیشنهادات خود را از انتهای همین پست از قسمت نظرات با ما در میان بگذارید.
با تشکر:)
نت کپی- مرجع دانلود قالب و اسکریپت فارسی
شما میتونید سورس این پروژه رو به صورت رایگان دانلود کنید
آموزش ویدئویی ساخت گالری عکس