آموزش ساخت گالری تصاویر با جاوا اسکریپت

آموزش ساخت گالری تصاویر با جاوا اسکریپت

ساخت گالری تصاویر جاوا اسکریپت – کتابخانه 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 : تکرار تصاویر پس از پایان

خروجی برنامه گالری

دانلود برنامه gallery

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید .

لیست نظرات

  1. برنامه نویس زبل
    برنامه نویس زبل

    سلام چطور می تونم عکسهای بیشتری اضافه کنم

    22 اسفند 1400 | 09:52:40
  • حسین باقری
    حسین باقری

    سلام زیر تگ a که static/img/3.jpg داره کد پایین رو اضافه کنید

    horse
    
    22 اسفند 1400 | 10:53:52
contact us

انجام انواع پروژه های وب


( فروشگاهی ، خبری ، رزرواسیون ، وردپرس ، حل مشکلات وردپرسی )

شماره تماس و واتساپ : 09398554859