آموزش ساخت گالری تصاویر با جاوا اسکریپت
ساخت گالری تصاویر جاوا اسکریپت – کتابخانه simple-lightbox به راحتی کمک می کند تا یک گالری شیک و حرفه ای را برای وبسایت مان جهت نمایش نمونه کار ها ، اسکرین شات ، تصاویر و … ایجاد کنیم .
آماده سازی HTML برای گالری تصاویر
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Rapidcode.iR - سورس کد</title>
<link rel="stylesheet" href="static/css/lib/simple-lightbox.min.css">
<link rel="stylesheet" href="static/css/main.css">
</head>
<body>
<div class="container">
<a id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a>
<div class="gallery1">
<a href="static/img/1.jpg"><img src="static/img/1.jpg" alt="horse" title="اسب سیاه"/></a>
<a href="static/img/2.jpg"><img src="static/img/2.jpg" alt="horse" title="اسب سفید"/></a>
<a href="static/img/3.jpg"><img src="static/img/3.jpg" alt="horse" title="another horse"/></a>
</div>
</div>
<script src="static/js/lib/simple-lightbox.min.js"></script>
<script src="static/js/app.js"></script>
</body>
</html>
افزودن css جهت نظم دادن برای ترتیب نمایش تصاویر گالری
فایل main.css
.gallery1 img{
width: 350px;
height: 233px;
}
app.js آماده سازی گالری
var lightbox = new SimpleLightbox('.gallery1 a', {
captionPosition : "top" ,
animationSpeed : 700,
loop : true,
});
captionPosition : نمایش موقعیت نوشته تصویر
animationSpeed : سرعت تغییر تصاویر
loop : تکرار تصاویر پس از پایان
لیست نظرات
سلام چطور می تونم عکسهای بیشتری اضافه کنم
سلام زیر تگ a که static/img/3.jpg داره کد پایین رو اضافه کنید