ساخت Lightbox Image Gallery بدون جاوا اسکریپت

مقدمه

طراحی بصری برای موفقیت در عرصه وب ضروری است .
و برای وبلاگ‌ها و فروشگاه‌های اینترنتی و غیره نیز به همان اندازه حائز اهمیت می‌باشد به همین دلیل از جنبه بصری وب‌سایت هرگز نباید غافل شد .

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

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

Image Gallery Lightbox چی هست؟

گالری تصویر روشی محبوب برای ادغام تصاویر در وب‌سایت است که به کاربران اجازه می دهد چندین عکس را به طور واضح و همزمان ببینند.

ایجاد گالری لایت‌باکس یکی از ساده‌ترین راه‌های ارائه تصاویر در صفحه است.

منطقش چیه؟

وقتی کاربر بر روی تصویر پیش نمایش که دارای اندازه کمتری است کلیک می کند، همزمان با کلیک شدن صفحه وب سایت کمرنگ می شود (تاریک‌تر) ، و آن تصویر در قالب بزرگتری به نمایش در می‌آید.

این روش چه مزایایی می‌تواند داشته باشد؟

1. علاوه بر مزیت مشاهده همزمان چندین عکس به صورت واضح و همزمان که در بالا ذکر شد.
2. افزایش جستجو و تعداد بازدید از وب‌سایت.
3. افزایش تعامل کاربران در وب‌سایت (User Friendly) که همین موجب بالا رفتن زمان دیده شدن سایت توسط کاربران می‌شود.

چگونه پیاده سازی کنیم؟

با استفاده CSS ،HTML و JavaScript می توان یک Galley Image Lightbox پیاده کرد. اما ما می‌خواهیم در این مطلب فقط و فقط با استفاده از HTML و CSS این کار را انجام دهیم، بدون نیاز به حتی یک خط کد جاوا اسکریپت یا هر کتابخانه مرتبط دیگر.

تنها با به کار بردن دستوری از CSS می توان این کار را انجام داد.

target:

با استفاده از این سودو کلاس (Pseudo-class) ساده در CSS می‌توان این کار رو انجام داد نه فقط این کار بلکه خیلی کارها و ایده های دیگه هم قابل پیاده سازیه.

برای یادگیری هر چه بیشتر میتونین به مطلب target در سایت مراجعه کنین که به صورت کامل و همراه با مثال بهش پرداخته شده و میتونه مفید باشه .

ولی به صورت خلاصه کار این انتخابگر، انتخاب کردن مقصد لنگر از یک لینک (href) می باشد.

مقصدی که دارای ID مورد نظر می باشد (ادرس ID داده شده در خاصیت href تگ <a> که قبل از ادرس باید حتما از # استفاده بشه).

با کلیک روی لینک، ما به جایی میریم که عنصری با ID (image) در ان جا قرار دارد.

  <a href="#image">رفتن به سوی عنصر تصویر</a>
  <!--  -->
  <!--  -->
  <!--  -->
  <!-- دیگر عناصر صفحه -->
  <!--  -->
  <!--  -->
  <img id="image" src="pic.avif" />  

ساختار کد

ما ساختار ساده ای خواهیم داشت، که از دو بخش اصلی تشکیل خواهد شد:

<div class="gallery__images"></div>
      
<div class="gallery__lightbox"></div>

در باکس اول ما ابتدا لینک‌ها را داریم و سپس تصاویر را درون آنها قرار می‌دهیم:

<div class="gallery__images">
  <a class="gallery__images-link" href="#gallery__lightbox1">
    <img src="ادرس تصویر در سایز کوچکتر" class="gallery__images-small" />
  <a/>

  <a class="gallery__images-link" href="#gallery__lightbox2">
    <img src="ادرس تصویر در سایز کوچکتر" class="gallery__images-small" />
  <a/>

  <a class="gallery__images-link" href="#gallery__lightbox3">
    <img src="ادرس تصویر در سایز کوچکتر" class="gallery__images-small" />
  <a/>

  <a class="gallery__images-link" href="#gallery__lightbox4">
    <img src="ادرس تصویر در سایز کوچکتر" class="gallery__images-small" />
  <a/>
</div>

به ادرس داده شده به خاصیت href موجود در لینک‌ها توجه کنید به هر کدام آدرسی متفاوت داده شده، به رقم آخر نام آدرس‌ها دقت کنید، در ادامه با این‌ها کار داریم .

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

 

خب این از ساختار باکس اول ، بریم سراغ استایل‌های مربوط به این بخش :

.gallery__images {
   display: grid; /* ایجاد یک نگهدارنده گرید */
   grid-template-columns: 1fr; /* ایجاد یک ستون  */
   grid-auto-rows: 200px; /* اندازه یک ردیف ضمنی */
   max-width: 800px;
   margin: 100px auto;
   gap: 1em;
}

@media (min-width: 576px) {
  .gallery__images {
    grid-template-columns: 1fr 1fr;/*عرض صفحه بزرگتر از عرض گفته شده شود به صورت دو ستون هم اندازه نمایش داده شود */
  }
}

@media (min-width: 768px) {
  .gallery__images {
    grid-template-columns: 1fr 1fr 1fr;  
  }
}
     
.gallery__images-link {
   width: 100%;
}

.gallery__images-small {
    display: block; /* برای رفع فضای اضافی زیر تصویر */
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 10px solid #fff;
    border-radius: 4px;
}

ما در این مثال از ماژول صفحه ارایی گرید برای جایگذاری عناصر استفاده می کنیم.

 

بریم سراغ ساختار و استایل دادن به بخش دوم :

<div class="gallery__lightbox" id="gallery__lightbox1">
  <div class="gallery__lightbox-content">
    <a href="#" class="gallery__lightbox-close">
      ×
    </a>
    <img src="ادرس تصویر در سایز بزرگتر" class="gallery__lightbox-image"/>
  </div>
</div>
 
<div class="gallery__lightbox" id="gallery__lightbox2">
  <div class="gallery__lightbox-content">
    <a href="#" class="gallery__lightbox-close">
      ×
    </a>
    <img src="ادرس تصویر در سایز بزرگتر" class="gallery__lightbox-image"/>
  </div>
</div>

<div class="gallery__lightbox" id="gallery__lightbox3">
  <div class="gallery__lightbox-content">
    <a href="#" class="gallery__lightbox-close">
      ×
    </a>
    <img src="ادرس تصویر در سایز بزرگتر" class="gallery__lightbox-image"/>
  </div>
</div>

<div class="gallery__lightbox" id="gallery__lightbox4">
  <div class="gallery__lightbox-content">
    <a href="#" class="gallery__lightbox-close">
      ×
    </a>
    <img src="ادرس تصویر در سایز بزرگتر" class="gallery__lightbox-image"/>
  </div>
</div>
 

نکات:

• به gallery__lightbox ها دقت کنید که دارای یک ID با مقداری هستند. این مقدار همانی است که در قسمت اول (gallery__images) وجود دارد و به خاصیت href لینک‌ها داده شده است. که باعث می‌شود زمانی که بر روی تصاویر لینک‌دار کلیک شد، gallery__lightbox انتخاب شود.
• عنصر a با کلاس gallery__lightbox-close که دارای خاصیت "#"=href می باشد، در واقع برای زمانی است که بر روی تصویر کلیک شده و تصویر در یک سایز بزرگ‌تر به نمایش در آمده است، سپس زمانی که بخواهیم عکس بزرگ شده را ببندیم و به عکس پیشفرض (سایز کوچک) برگردیم کاربرد دارد.

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

خب اینم از ساختار بخش دوم ، بریم سر وقت استایل‌های مربوط به این بخش:

.gallery__lightbox {
   position: fixed; /*  ثابت و از جریان اصلی صفحه خارج کردن عنصر  */
   top: 0;
   left: 0;
   width: 100%;  
   height: 100%;  
   background-color: rgba(0 , 0 , 0 , 0.8);  /* یک رنگ تاریک با شفافیت کمتر */
   display: flex;  
   justify-content: center;  
   align-items: center;  
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.4s ease-in-out;
}
  
.gallery__lightbox:target {
   pointer-events: auto;
   opacity: 1;
}
  
.gallery__lightbox-content {
   position: relative;
   transform: scale(0);
   transition: transform 0.4s ease-in-out;
}
  
.gallery__lightbox:target .gallery__lightbox-content {
  transform: scale(1);
}

.gallery__lightbox-image {
   width: auto;
   height: auto;
   max-width: 90vw;
   max-height: 90vh;
   object-fit: contain;
   border: 3px solid white;
}
  
.gallery__lightbox-close {
   position: absolute;
   top: -18px;
   right: 0;
   width: 30px;
   height: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
   text-decoration: none;
   font-size: 25px;
   background-color: red;
   color: white;
   border-radius: 50%;
}

 

نکات:

با دادن خاصیت position: fixed به عنصر با کلاس gallery__lightbox در این مثال، دو اتفاق برای آن رقم زدیم:

۱ ) عنصر ثابت می شود و با اسکرول و بالا و پایین شدن صفحه، جا به جا نمی‌شود .

۲ ) با دادن عرض و ارتفاع ۱۰۰ درصد به عنصر، عملا تمام صفحه را پر می کند، و این امکان را برایمان فراهم میکند که با دادن یک رنگ پس زمینه تاریک، به خواسته خودمان که، تاریک شدن صفحه نمایش بعد از کلیک شدن بر روی تصاویر است برسیم.

۳) و اما در مهم ترین قسمت به target می رسیم، عضوی از CSS که در ابتدای مطلب، گفته بودیم که پیاده سازی این کار بر عهده‌اش خواهد بود.

همان طور که گفتیم عنصر در ابتدا مخفی است، و زمانی که مورد هدف قرار گرفت (target) ، نمایش داده شود .

در این مثال، برای واکنشگرایی (ریسپانسیو)، از مدیا کوئری استفاده کردیم، در مورد کارکرد مدیا کوئری و به طور کل بحث واکنش گرایی در صفحات وب می‌توانید به مقاله ای که در رابطه با مدیاکوئری در سایت، قرار دارد مراجعه کنید.

نتیجه کار را در دموی زیر مشاهده می‌کنید:

See the Pen
gallery image lightbox by Yazdan (@Yazdan_monjezi)
on CodePen.

دمویی دیگر

See the Pen
image gallery lightbox 2 by Yazdan (@Yazdan_monjezi)
on CodePen.

کاربرد pointer-events

در قسمتی از دمو، از خاصیت pointer-events استفاده شده است، این خاصیت امکان پاسخ دادن عناصر HTML، به تمام رویداد های ماوس را می دهد، یعنی عنصر مربوطه نسبت به رویداد پاسخگو باشد یا خیر، این رویداد می تواند رویدادهای CSS مانند hover ،active ،focus و یا رویدادها در جاوا اسکریپت باشد.

در مثال‌های بالا، زمانی که نگهدارنده‌ی تصویر اصلی مخفی هست، می‌خواهیم هرگونه تعامل کاربر با این عناصر را غیرفعال و بعد از کلیک دوباره فعال کنیم:

.gallery__lightbox {
  opacity: 0;
  pointer-events: none;
}  

.gallery__lightbox:target {
  opacity: 1;
  pointer-events: auto;
}

در مورد این ویژگی، می توانید به مطلب مربوط به pointer-events مراجعه کنید.

موفق باشید 🙂