خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

چگونه یک گالری عکس ساده با استفاده از HTML، CSS و جاوا اسکریپت ایجاد کنیم

ارشیا یوسفی ادیب ۱۷ فروردین, ۱۴۰۳ 2 min read

مجموعه ای از تصاویر را در وب سایت خود به نمایش می گذارید؟ یاد بگیرید که چگونه این کار را با یک گالری تصاویر اولیه که از حداقل کد استفاده می کند انجام دهید.

ایجاد یک گالری تصاویر ساده با استفاده از HTML، CSS و جاوا اسکریپت یک راه عالی برای یادگیری اصول اولیه توسعه وب است. در گالری تصاویر، می‌توانید با انتخاب ریز عکس‌ها برای بزرگ‌نمایی تصویر در صفحه وب، تصاویر را ورق بزنید.

برای ایجاد گالری، می توانید از HTML برای اضافه کردن محتوای صفحه وب و CSS برای اضافه کردن یک ظاهر استفاده کنید. شما می توانید از جاوا اسکریپت برای تعاملی کردن گالری زمانی که کاربر روی هر یک از تصاویر کوچک کلیک می کند استفاده کنید.

نحوه ایجاد رابط کاربری برای گالری تصاویر

با استفاده از HTML و CSS، رابط کاربری گالری تصاویر را اضافه کنید. این شامل افزودن یک تصویر بزرگ در مرکز صفحه وب است که بر اساس تصویر کوچک انتخاب شده تغییر خواهد کرد. همچنین می توانید نمونه کامل کد منبع را در GitHub مشاهده کنید.

  1. یک فایل جدید به نام “index.html” ایجاد کنید.
  2. در داخل این فایل، ساختار اصلی کد HTML را اضافه کنید:      گالری تصاویر              

    گالری تصاویر

          

    برای مشاهده تصویر یک تصویر کوچک در زیر انتخاب کنید

        

  

  • یک زیر پوشه به نام “تصاویر” ایجاد کنید. آن را با چندین تصویر پر کنید و آنها را از “image1.jpg” تا “image10.jpg” نامگذاری کنید.
  • در فایل HTML خود، یک div برای گالری تصاویر اضافه کنید:
  • در قسمت گالری تصاویر، یک تگ تصویر اضافه کنید تا تصویر انتخاب شده بزرگ شده نمایش داده شود. به طور پیش فرض، اولین تصویر را در پوشه “images” نمایش دهید:
  • در همان پوشه فایل HTML خود، یک فایل جدید به نام “styles.css” با CSS زیر اضافه کنید. به راحتی می توانید CSS را تغییر دهید تا اجزای طراحی نئومورفیک را اضافه کنید یا با استفاده از این نکات و ترفندهای CSS تغییراتی در طراحی ایجاد کنید.
  • .intro {   text-align: center; font-family: Arial;}h2 {   font-size: 36px;}p {   font-size: 14pt;}#image-gallery {   width: 600px; حاشیه: 0 خودکار؛}#current-image {   width: 100%;}
  • پیوندی به فایل CSS خود در تگ سر فایل 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>

    مدیر فایل با تصاویر داخل پوشه

    <div id="image-gallery">

    </div>
    <img id="current-image" src="images/image1.jpg" alt="Image 1">
    .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%;
    } 
    <link rel="stylesheet" type="text/css" href="styles.css">

    نحوه اضافه کردن ریز عکسها برای سایر تصاویر در گالری

    در حال حاضر، گالری تصاویر فقط اولین تصویر را نمایش می دهد. در زیر تصویر انتخاب شده، فهرستی از تصاویر کوچک اضافه کنید. این ریز عکسها پیش نمایشی از تمام تصاویر داخل پوشه “تصاویر” را نمایش می دهند.

    1. در داخل گالری تصاویر در فایل HTML، یک div دیگری برای نمایش ریز عکسها برای سایر تصاویر اضافه کنید:
  • در داخل فایل CSS، یک سبک برای لیست ریز عکسها اضافه کنید:#image-thumbs {   display: flex; justify-content: center; حاشیه بالا: 20 پیکسل؛}
  • در همان پوشه فایل های HTML و CSS خود، یک فایل جدید به نام “script.js” اضافه کنید.
  • پیوندی به فایل جاوا اسکریپت خود در پایین تگ بدنه HTML اضافه کنید:    
  • در داخل فایل جاوا اسکریپت، عنصر HTML div را دریافت کنید که لیست ریز عکسها را ذخیره می کند:var imageThumbs = document.getElementById(“image-thumbs”);
    • <div id="image-thumbs"></div>
    #image-thumbs { 
      display: flex; 
      justify-content: center; 
      margin-top: 20px;
    }
    <body>
      <!-- Your code here -->
      <script src="script.js"></script>
    </body>
    var imageThumbs = document.getElementById("image-thumbs");
    1. برای چرخش هر یک از 10 تصویر در گالری، یک حلقه for اضافه کنید: for (var i = 1; i <= 10; i++) {}
    2. در داخل حلقه، یک عنصر img جدید برای هر تصویر ایجاد کنید:var thumb = document.createElement(“img”);
    3. برای ویژگی های “src” و “alt” مقادیر اضافه کنید. در این مورد، ویژگی “src” مسیر فایل به تصویر در همان نمایه داخل پوشه “images” است:thumb.src = “images/image” + i + “.jpg”;thumb.alt = “تصویر”. ” + من
    4. در داخل فایل CSS خود، یک کلاس جدید برای استایل دادن به تصویر کوچک تصویر اضافه کنید. همچنین می‌توانید سایر سبک‌های شناور یا انتقالی CSS را برای تصاویر کوچک اضافه کنید تا وب‌سایت خود واکنش‌گرا و تعاملی باشد.thumb {   width: 80px; ارتفاع: 80px; شیء مناسب: پوشش; حاشیه سمت راست: 10px; مکان نما: اشاره گر؛}
    5. در داخل فایل جاوا اسکریپت، کلاس بالا را به thumbnail جدید اضافه کنید:thumb.classList.add(“thumb”);
    6. تصویر بندانگشتی جدید را به عنصر HTML که حاوی لیست ریز عکسها است اضافه کنید:imageThumbs.appendChild(thumb);
    for (var i = 1; i <= 10; i++) {

    }
    var thumb = document.createElement("img");
    thumb.src = "images/image" + i + ".jpg";
    thumb.alt = "Image " + i;
    .thumb { 
      width: 80px; 
      height: 80px; 
      object-fit: cover; 
      margin-right: 10px; 
      cursor: pointer;
    }
    thumb.classList.add("thumb");
    imageThumbs.appendChild(thumb);

    نحوه تغییر تصویر هنگامی که کاربر روی یک تصویر کوچک کلیک می کند

    وقتی کاربر روی یکی از ریز عکسها کلیک می کند، تصویر بزرگ شده در مرکز صفحه را به تصویر انتخابی تغییر دهید. می توانید این قابلیت را در فایل جاوا اسکریپت اضافه کنید.

    1. در بالای فایل جاوا اسکریپت، عنصر HTML تصویر انتخاب شده فعلی را دریافت کنید:var currentImage = document.getElementById(“current-image”);
    2. در داخل حلقه for، یک کنترل کننده رویداد اضافه کنید که وقتی کاربر هر یک از تصاویر کوچک را در پایین صفحه انتخاب می‌کند فعال می‌شود:thumb.addEventListener(  “click”, function() {  });
    3. در کنترل کننده رویداد، ویژگی “src” تصویر فعلی را به تصویر تازه انتخاب شده تغییر دهید. همچنین می توانید ویژگی “alt” را به روز کنید:currentImage.src = this.src;currentImage.alt = this.alt;
    4. روی فایل “index.html” کلیک کنید تا در یک مرورگر وب باز شود.
    5. برای مشاهده تصویر، یکی از ریز عکسها را انتخاب کنید.
    var currentImage = document.getElementById("current-image");
    thumb.addEventListener(
      "click", function() {

      }
    );
    currentImage.src = this.src;
    currentImage.alt = this.alt;

    گالری تصاویر با اولین تصویر انتخاب شده استگالری تصاویر با تصاویر دیگر انتخاب شده است

    به گسترش دانش جاوا اسکریپت خود ادامه دهید

    صرف نظر از تجربه شما، مهم است که به ساختن پروژه ها ادامه دهید تا دانش خود را گسترش دهید. به کاوش در پروژه های دیگر مانند ساخت یک بازی شطرنج، ماشین حساب، یا لیست کارها ادامه دهید.

    مطلب مرتبط:   ایجاد اجزای کارت سفارشی با HTML و CSS
    Tags: