Lightbox এবং Image Gallery তৈরি করা

Foundation ফ্রেমওয়ার্কে Lightbox এবং Image Gallery তৈরি করা খুবই সহজ এবং একে আরও ইন্টারঅ্যাকটিভ ও ব্যবহারকারীর জন্য আকর্ষণীয় করতে Foundation-এর পাওয়ারফুল JavaScript প্লাগইন ব্যবহার করা হয়। এই প্লাগইনগুলি সহজে ইমেজ গ্যালারী এবং লাইটবক্স (চিত্র প্রদর্শন) তৈরি করতে সহায়তা করে।

Lightbox কী?

Lightbox একটি পপ-আপ প্রকারের ইন্টারফেস যা ব্যবহারকারীকে ইমেজ বা কনটেন্ট বড় আকারে দেখতে সাহায্য করে। এটি সাধারণত ইমেজ গ্যালারির সাথে ব্যবহৃত হয়, যেখানে ব্যবহারকারী একটি ছোট থাম্বনেইল চিত্রে ক্লিক করলে পুরো চিত্রটি পপ-আপ হয়ে প্রদর্শিত হয়।

Foundation ফ্রেমওয়ার্কে Reveal Modal প্লাগইন ব্যবহার করে সহজেই Lightbox তৈরি করা যায়। এটি মূলত Modal প্লাগইন যা ফাউন্ডেশনে ডিফল্টভাবেই অন্তর্ভুক্ত থাকে এবং এতে কাস্টমাইজেশনের সুবিধা রয়েছে।

Foundation-এ Lightbox তৈরি করা

১. HTML স্ট্রাকচার

প্রথমে ইমেজগুলো একটি থাম্বনেইল হিসেবে প্রদর্শন করতে হবে, এবং একটি modal তৈরি করতে হবে যেখানে লাইটবক্সের চিত্রটি বড় আকারে দেখা যাবে।

<div class="grid-container">
  <div class="grid-x grid-margin-x">
    <div class="cell small-6 medium-4 large-3">
      <a href="#" data-open="exampleModal1">
        <img src="image1-thumb.jpg" alt="Image 1" class="thumbnail">
      </a>
    </div>
    <div class="cell small-6 medium-4 large-3">
      <a href="#" data-open="exampleModal2">
        <img src="image2-thumb.jpg" alt="Image 2" class="thumbnail">
      </a>
    </div>
  </div>
</div>

<!-- Modal for Image 1 -->
<div class="reveal" id="exampleModal1" data-reveal>
  <img src="image1.jpg" alt="Image 1">
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">×</span>
  </button>
</div>

<!-- Modal for Image 2 -->
<div class="reveal" id="exampleModal2" data-reveal>
  <img src="image2.jpg" alt="Image 2">
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">×</span>
  </button>
</div>

২. JavaScript যুক্ত করুন

Foundation-এর Reveal Modal সিস্টেম কাজ করার জন্য জাভাস্ক্রিপ্ট কনফিগার করতে হবে। Foundation ফ্রেমওয়ার্কের জাভাস্ক্রিপ্ট লাইব্রেরি যুক্ত করতে হবে।

<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites/dist/js/foundation.min.js"></script>
<script>
  $(document).foundation();
</script>

৩. স্টাইলিং

Foundation এ ইমেজ থাম্বনেইল ও লাইটবক্সে ব্যবহৃত চিত্রগুলোর জন্য কিছু CSS স্টাইল ব্যবহার করা যায়। উদাহরণস্বরূপ:

.thumbnail {
  width: 100%;
  height: auto;
  border: 2px solid #ccc;
}

.reveal img {
  width: 100%;
  height: auto;
}

এই কোডের মাধ্যমে, আপনি ইমেজগুলোকে থাম্বনেইল হিসেবে ছোট আকারে এবং লাইটবক্সে পুরো স্ক্রীনে প্রদর্শন করতে সক্ষম হবেন।

Foundation-এ Image Gallery তৈরি করা

Foundation ফ্রেমওয়ার্কে ইমেজ গ্যালারি তৈরি করার জন্য আপনি grid সিস্টেম এবং thumbnails ব্যবহার করতে পারেন। একটি গ্যালারি সাধারণত একাধিক ইমেজ থাম্বনেইল দিয়ে সাজানো হয়, যেখানে প্রতিটি ইমেজ ক্লিক করলে তা একটি লাইটবক্সে প্রদর্শিত হবে।

১. HTML স্ট্রাকচার (Image Gallery)

<div class="grid-container">
  <div class="grid-x grid-margin-x">
    <div class="cell small-6 medium-4 large-3">
      <a href="#" data-open="galleryModal1">
        <img src="image1-thumb.jpg" alt="Gallery Image 1" class="thumbnail">
      </a>
    </div>
    <div class="cell small-6 medium-4 large-3">
      <a href="#" data-open="galleryModal2">
        <img src="image2-thumb.jpg" alt="Gallery Image 2" class="thumbnail">
      </a>
    </div>
    <div class="cell small-6 medium-4 large-3">
      <a href="#" data-open="galleryModal3">
        <img src="image3-thumb.jpg" alt="Gallery Image 3" class="thumbnail">
      </a>
    </div>
  </div>
</div>

<!-- Modal for Image 1 -->
<div class="reveal" id="galleryModal1" data-reveal>
  <img src="image1.jpg" alt="Gallery Image 1">
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">×</span>
  </button>
</div>

<!-- Modal for Image 2 -->
<div class="reveal" id="galleryModal2" data-reveal>
  <img src="image2.jpg" alt="Gallery Image 2">
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">×</span>
  </button>
</div>

<!-- Modal for Image 3 -->
<div class="reveal" id="galleryModal3" data-reveal>
  <img src="image3.jpg" alt="Gallery Image 3">
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">×</span>
  </button>
</div>

২. Grid System:

Foundation এর grid-x এবং cell ক্লাস ব্যবহার করে গ্যালারির থাম্বনেইলগুলোকে একটি সুন্দর গ্রিডে সাজানো হয়েছে। এখানে, আমরা প্রতি সারিতে ৪টি ইমেজ প্রদর্শন করছি।

Foundation ফ্রেমওয়ার্কের Lightbox এবং Image Gallery তৈরি করা খুবই সহজ। Reveal Modal প্লাগইন ব্যবহার করে আপনি খুব সহজেই একটি Lightbox বা পপ-আপ ইমেজ গ্যালারি তৈরি করতে পারেন। Foundation-এর Grid System এবং thumbnail ক্লাস ব্যবহার করে একাধিক ইমেজ প্রদর্শন করা হয়। এটি রেসপনসিভ এবং ব্যবহারকারী-বান্ধব ওয়েবসাইট ডিজাইন তৈরিতে সহায়তা করে।