Foundation এর মিডিয়া Components

Foundation ফ্রেমওয়ার্কের মিডিয়া কম্পোনেন্টস ওয়েব ডিজাইনে কনটেন্ট প্রদর্শনের একটি অত্যন্ত গুরুত্বপূর্ণ অংশ। এটি মূলত মাল্টিমিডিয়া উপাদান (যেমন: ইমেজ, ভিডিও, অডিও) এবং তাদের সাথে সম্পর্কিত কন্টেন্ট সজ্জিত করতে ব্যবহৃত হয়। Foundation ফ্রেমওয়ার্কে কিছু প্রি-বিল্ট মিডিয়া কম্পোনেন্ট রয়েছে, যেগুলো খুব সহজে ব্যবহার করা যায় এবং রেসপনসিভ ডিজাইনের জন্য উপযুক্ত।

১. Media Object

Media Object হল একটি কনটেইনার, যা সাধারণত একটি ইমেজ বা অন্য কোনো মিডিয়া উপাদানকে পাঠ্যের সাথে সংযুক্ত করতে ব্যবহৃত হয়। এটি অনেক ক্ষেত্রে প্রোফাইল পিকচার, টেক্সট এবং লিঙ্ক সহ মেসেজ বা মন্তব্য প্রদর্শনের জন্য ব্যবহৃত হয়।

Media Object ব্যবহারের উদাহরণ:

<div class="media-object">
  <div class="media-object-section">
    <img src="image.jpg" alt="media image" />
  </div>
  <div class="media-object-section">
    <h5>মিডিয়া টাইটেল</h5>
    <p>এটি মিডিয়া অবজেক্টের সাথে সম্পর্কিত টেক্সট বা কনটেন্ট।</p>
  </div>
</div>

এখানে:

• media-object: এটি মিডিয়া অবজেক্টের কনটেইনার।
• media-object-section: এটি মিডিয়া অবজেক্টের প্রতিটি অংশের জন্য একটি সেকশন তৈরি করে (যেমন: ইমেজ এবং টেক্সট)।

ফাউন্ডেশন মিডিয়া অবজেক্টে, ইমেজটি সাধারণত বাম দিকে এবং পাঠ্যটি ডান দিকে থাকে। এটি রেসপনসিভও হতে পারে।

২. Video Embed

Foundation ফ্রেমওয়ার্কে ভিডিও এম্বেড করার জন্য একটি সহজ উপায় রয়েছে। এটি বিভিন্ন ভিডিও প্ল্যাটফর্ম (যেমন YouTube, Vimeo) থেকে ভিডিও এম্বেড করতে ব্যবহার করা হয়। Foundation রেসপনসিভ ভিডিও এম্বেডিং সিস্টেম প্রদান করে, যাতে ভিডিও বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে প্রদর্শিত হয়।

Video Embed ব্যবহারের উদাহরণ:

<div class="responsive-embed widescreen">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</div>

এখানে:

• responsive-embed: এটি ভিডিও কনটেন্টকে রেসপনসিভভাবে প্রদর্শন করে।
• widescreen: এটি ভিডিওর জন্য একটি ১৬:৯ অনুপাত তৈরি করে (যেমন, YouTube ভিডিও)।

Foundation এর responsive-embed ক্লাস স্বয়ংক্রিয়ভাবে ভিডিওর আকার পরিবর্তন করে বিভিন্ন স্ক্রীন সাইজে উপযুক্তভাবে মানিয়ে নেয়।

৩. Thumbnail

Thumbnail হলো ছোট আকারের ইমেজ, যা বড় ইমেজ বা কন্টেন্টের জন্য প্রিভিউ হিসেবে কাজ করে। Foundation এ thumbnail ক্লাস ব্যবহার করে সহজে ছোট আকারের ইমেজ তৈরি করা যায়।

Thumbnail ব্যবহারের উদাহরণ:

<img src="image.jpg" alt="thumbnail" class="thumbnail" />

এখানে:

• thumbnail: এটি ইমেজকে ছোট আকারে প্রদর্শন করার জন্য Foundation এর ক্লাস।

Thumbnail সাধারণত প্রোফাইল পিকচার, গ্যালারি, ব্লগ পোস্ট ইত্যাদির ক্ষেত্রে ব্যবহৃত হয়।

৪. Media Grid

Media Grid হল একটি গ্রিড সিস্টেম, যা মিডিয়া উপাদানগুলোর জন্য ব্যবহার করা হয়। এটি বিভিন্ন মিডিয়া উপাদান (যেমন ইমেজ, ভিডিও) একসাথে গ্রিডে প্রদর্শন করার জন্য ব্যবহৃত হয়। Foundation গ্রিড সিস্টেমের সাহায্যে একাধিক মিডিয়া উপাদান সুন্দরভাবে সাজানো যায়।

Media Grid ব্যবহারের উদাহরণ:

<div class="row small-up-2 medium-up-3 large-up-4">
  <div class="column">
    <img src="image1.jpg" alt="Image 1" class="thumbnail" />
  </div>
  <div class="column">
    <img src="image2.jpg" alt="Image 2" class="thumbnail" />
  </div>
  <div class="column">
    <img src="image3.jpg" alt="Image 3" class="thumbnail" />
  </div>
  <div class="column">
    <img src="image4.jpg" alt="Image 4" class="thumbnail" />
  </div>
</div>

এখানে:

• small-up-2, medium-up-3, large-up-4: এগুলো গ্রিডের কাস্টমাইজড ব্রেকপয়েন্টস। ছোট স্ক্রীনে ২টি, মিডিয়াম স্ক্রীনে ৩টি এবং বড় স্ক্রীনে ৪টি ইমেজ প্রদর্শিত হবে।

Foundation এর Media Grid কম্পোনেন্ট রেসপনসিভভাবে মিডিয়া উপাদানগুলো প্রদর্শন করে এবং এটি গ্রিড সিস্টেমের মাধ্যমে কাস্টমাইজ করা যায়।

৫. Audio Embed

Foundation এর সাহায্যে আপনি অডিও ফাইলও সহজে এম্বেড করতে পারেন। এটি বিভিন্ন অডিও ফাইল (যেমন MP3) ওয়েবপেজে এম্বেড করার জন্য ব্যবহৃত হয়।

Audio Embed ব্যবহারের উদাহরণ:

<audio controls>
  <source src="audio.mp3" type="audio/mp3">
  আপনার ব্রাউজার এই অডিও প্লে করতে সক্ষম নয়।
</audio>

এখানে:

• controls: এটি প্লেব্যাক কন্ট্রোল যুক্ত করে, যেমন প্লে, পজ, ভলিউম ইত্যাদি।
• source: এটি অডিও ফাইলের সোর্স নির্ধারণ করে।

Foundation ফ্রেমওয়ার্কের মিডিয়া কম্পোনেন্টস যেমন Media Object, Video Embed, Thumbnail, Media Grid, এবং Audio Embed ওয়েব ডিজাইনে মিডিয়া উপাদানগুলি প্রফেশনালভাবে এবং রেসপনসিভভাবে প্রদর্শন করতে সাহায্য করে। Foundation এর এই কম্পোনেন্টগুলো বিভিন্ন ডিভাইসে সুন্দরভাবে কাজ করে এবং ইউজারদের জন্য একটি ভালো অভিজ্ঞতা প্রদান করে।

Foundation ফ্রেমওয়ার্কে Responsive Images এবং Media Queries ব্যবহারের মাধ্যমে আপনার ওয়েবসাইটটি বিভিন্ন ডিভাইসে সুন্দরভাবে দেখা যায়। Foundation এ রেসপনসিভ ডিজাইন খুবই সহজ এবং কার্যকর, কারণ এটি Flexbox এবং CSS Grid এর মতো টেকনোলজি ব্যবহার করে। এর মাধ্যমে ওয়েবসাইটের কনটেন্ট যেমন টেক্সট, ছবি, এবং ভিডিও বিভিন্ন স্ক্রীন সাইজে উপযুক্তভাবে রেন্ডার হয়।

Responsive Images

Responsive images হল এমন ইমেজ যা বিভিন্ন স্ক্রীনের সাইজ এবং রেজোলিউশনের জন্য উপযুক্তভাবে পরিবর্তিত হয়। এটি ওয়েবসাইটের পারফরম্যান্স এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।

Foundation এ Responsive Images ব্যবহার:

Foundation ফ্রেমওয়ার্কে রেসপনসিভ ইমেজ ব্যবহারের জন্য <picture> ট্যাগ, srcset এবং sizes অ্যাট্রিবিউট ব্যবহার করা যায়। এর মাধ্যমে আপনি বিভিন্ন রেজোলিউশন এবং ডিভাইসের জন্য ভিন্ন ইমেজ লোড করতে পারেন।

১. srcset এবং sizes ব্যবহার:

<img src="image-800.jpg"
     srcset="image-400.jpg 400w,
             image-800.jpg 800w,
             image-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 900px) 800px,
            1200px"
     alt="Responsive Image Example">

এখানে:

• srcset: ভিন্ন সাইজের ইমেজগুলির জন্য একটি লিস্ট তৈরি করে। এখানে তিনটি ভিন্ন সাইজের ছবি দেওয়া হয়েছে।
• sizes: ব্রাউজারকে নির্দেশ দেয় কোন সাইজের ছবি কোন স্ক্রীন সাইজের জন্য লোড হবে।

২. <picture> ট্যাগ ব্যবহার:

<picture>
  <source srcset="image-800.jpg" media="(max-width: 600px)">
  <source srcset="image-1200.jpg" media="(max-width: 1200px)">
  <img src="image-1600.jpg" alt="Responsive Image Example">
</picture>

এখানে:

• <source> ট্যাগের মাধ্যমে আপনি নির্দিষ্ট ব্রেকপয়েন্টে আলাদা ছবি লোড করতে পারবেন।
• <img> ট্যাগটি ব্রাউজারের জন্য ডিফল্ট ছবি সরবরাহ করে, যদি <source> ট্যাগগুলি কাজ না করে।

৩. Foundation এর .responsive-img ক্লাস ব্যবহার:

Foundation ফ্রেমওয়ার্কে একটি .responsive-img ক্লাস দেওয়া আছে, যা আপনার ছবির সাইজকে ওয়েবপেজের কনটেইনারের সাথে অ্যাডজাস্ট করতে সাহায্য করে।

<img src="image.jpg" class="responsive-img" alt="Responsive Image">

এটি ছবিকে রেসপনসিভ করে, এবং ছবির প্রস্থ নিজে থেকে প্যারেন্ট কনটেইনারের প্রস্থের সাথে অ্যাডজাস্ট হয়ে যায়।

Media Queries

Media Queries CSS এর একটি গুরুত্বপূর্ণ অংশ, যা দিয়ে আপনি নির্দিষ্ট ডিভাইসের স্ক্রীন সাইজ এবং রেজোলিউশনের ভিত্তিতে স্টাইল পরিবর্তন করতে পারেন। Foundation ফ্রেমওয়ার্কে এর জন্য ডিফল্ট ব্রেকপয়েন্ট দেওয়া আছে, যেগুলি মোবাইল, ট্যাবলেট এবং ডেস্কটপের জন্য উপযুক্ত।

১. Foundation এর ডিফল্ট ব্রেকপয়েন্ট:

Foundation এর ডিফল্ট 4টি ব্রেকপয়েন্ট রয়েছে:

• Small (ফোনের জন্য): 0px - 480px
• Medium (ট্যাবলেটের জন্য): 481px - 768px
• Large (ডেস্কটপের জন্য): 769px - 1024px
• X-Large (বড় ডেস্কটপের জন্য): 1025px - 1200px

২. Foundation এর Grid System এর সাথে Media Queries ব্যবহার:

Foundation এর গ্রিড সিস্টেমের মাধ্যমে আপনি সহজেই কনটেন্টের লেআউট পরিবর্তন করতে পারবেন বিভিন্ন ডিভাইসের জন্য। নিচে একটি উদাহরণ দেওয়া হলো, যেখানে গ্রিড সিস্টেমের সাথে media queries ব্যবহার করা হয়েছে।

<div class="row">
  <div class="small-12 medium-6 large-4 columns">
    <p>এই কলামটি মোবাইলে পুরো প্রস্থ নেবে, ট্যাবলেটে অর্ধেক এবং ডেস্কটপে এক তৃতীয়াংশ প্রস্থ নেবে।</p>
  </div>
  <div class="small-12 medium-6 large-4 columns">
    <p>এই কলামটি একইভাবে রেসপনসিভ হবে।</p>
  </div>
</div>

৩. Custom Media Queries:

Foundation এর ডিফল্ট ব্রেকপয়েন্ট ব্যবহার করার পাশাপাশি আপনি আপনার প্রয়োজন অনুযায়ী কাস্টম মিডিয়া কুয়েরি তৈরি করতে পারেন। উদাহরণস্বরূপ:

@media (max-width: 768px) {
  body {
    background-color: #f0f0f0;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
  }
}

এখানে:

• প্রথম মিডিয়া কুয়েরি (max-width: 768px) ব্রেকপয়েন্টের জন্য প্রযোজ্য, যেখানে পটভূমির রং পরিবর্তন করা হচ্ছে।
• দ্বিতীয় মিডিয়া কুয়েরি (min-width: 1024px) ডেস্কটপের জন্য প্রযোজ্য, যেখানে কনটেইনারের সর্বোচ্চ প্রস্থ নির্ধারণ করা হচ্ছে।

Foundation ফ্রেমওয়ার্কে Responsive Images এবং Media Queries ব্যবহারের মাধ্যমে আপনি একটি ওয়েবসাইটকে মোবাইল-ফার্স্ট এবং রেসপনসিভ ডিজাইন করতে পারেন। Responsive Images ব্যবহার করে ইমেজের সাইজ ডিভাইস অনুসারে পরিবর্তন করা যায়, এবং Media Queries এর মাধ্যমে নির্দিষ্ট ডিভাইস বা স্ক্রীন সাইজ অনুযায়ী CSS পরিবর্তন করা যায়। Foundation ফ্রেমওয়ার্ক এই দুটি প্রযুক্তি সহজে ব্যবহার করতে দেয়, যা আপনাকে বিভিন্ন স্ক্রীন সাইজে ওয়েবসাইটের উপযুক্ত প্রদর্শন নিশ্চিত করতে সাহায্য করে।

Foundation ফ্রেমওয়ার্কে ভিডিও এমবেডস (Video Embeds) এবং রেসপনসিভ ভিডিও ক্লাসেস (Responsive Video Classes) ব্যবহার করা সহজ। এটি ডেভেলপারদের জন্য ভিডিও কন্টেন্টকে ওয়েবসাইটে এমনভাবে এমবেড করার সুযোগ দেয়, যাতে তা বিভিন্ন স্ক্রীন সাইজে সুন্দরভাবে প্রদর্শিত হয়। Foundation রেসপনসিভ ডিজাইনের জন্য শক্তিশালী টুল হিসেবে কাজ করে, যা ভিডিও এমবেডসকে মোবাইল এবং ডেস্কটপে সমানভাবে উপযুক্ত করে তোলে।

Video Embeds

ভিডিও এমবেড হল একটি সহজ পদ্ধতি, যেখানে আপনি যেকোনো ভিডিও প্লাটফর্ম (যেমন, YouTube, Vimeo) থেকে ভিডিও কোড নিয়ে সরাসরি আপনার ওয়েব পেজে এমবেড করতে পারেন। Foundation এই কাজকে আরও সহজ এবং রেসপনসিভ বানিয়ে দেয়।

Foundation আপনাকে ভিডিও এমবেড করার জন্য একটি কাস্টম ক্লাস দেয়, যাতে ভিডিও নিজে থেকেই স্ক্রীনের সাইজ অনুযায়ী রেসপনসিভ হয়ে যায়। সাধারণভাবে, YouTube বা Vimeo ভিডিও এমবেড করতে iframe ট্যাগ ব্যবহার করা হয়।

উদাহরণ: YouTube ভিডিও এমবেড

<div class="flex-video">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
</div>

উদাহরণ: Vimeo ভিডিও এমবেড

<div class="flex-video">
  <iframe src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>

এখানে, flex-video ক্লাস ভিডিওটিকে রেসপনসিভ করবে এবং ভিডিওটি সমস্ত স্ক্রীন সাইজে সুন্দরভাবে প্রদর্শিত হবে।

Responsive Video Classes

Foundation এ ভিডিও এমবেড করতে flex-video ক্লাস ব্যবহৃত হয়। এটি একটি কাস্টম ক্লাস, যা ভিডিওর আকারকে স্বয়ংক্রিয়ভাবে স্ক্রীনের আকার অনুযায়ী অ্যাডজাস্ট করে।

flex-video ক্লাস:

• flex-video ক্লাস ব্যবহার করলে ভিডিও তার প্রস্থ এবং উচ্চতা মোবাইল, ট্যাবলেট এবং ডেস্কটপের স্ক্রীন সাইজ অনুযায়ী অটো রিসাইজ হবে।
• এই ক্লাসটি ব্যবহার করার ফলে ভিডিওটি তার কন্টেইনারের প্রস্থ অনুযায়ী মাপ নিতে পারে এবং এতে কোনও স্ক্রোলিং বা ব্রেকিং হবে না।

উদাহরণ:

<div class="flex-video">
  <iframe src="https://www.youtube.com/embed/your_video_id" frameborder="0" allowfullscreen></iframe>
</div>

এটি একটি সাধারণ উদাহরণ, যেখানে YouTube বা Vimeo ভিডিও এমবেড করা হয়েছে। flex-video ক্লাসটি ভিডিওকে রেসপনসিভ করার জন্য সহায়তা করে।

ভিডিও কন্টেন্টের জন্য অন্যান্য ক্লাস

• .video-container: এই ক্লাসটি একটি নির্দিষ্ট কন্টেইনারে ভিডিও রাখা হলে তা স্বয়ংক্রিয়ভাবে রেসপনসিভ হবে।
• .embed-container: ভিডিও প্লাটফর্মে সাধারণত কিছু এমবেড স্টাইল থাকে, সেগুলোর সাথে এই ক্লাসটি ব্যবহৃত হতে পারে।

Video Embed এর জন্য Foundation এর বৈশিষ্ট্য

1. রেসপনসিভ ভিডিও: Foundation স্বয়ংক্রিয়ভাবে ভিডিওটির আকার স্ক্রীনের সাইজ অনুযায়ী অ্যাডজাস্ট করে।
2. সহজ ব্যবহার: ভিডিও এমবেড করা খুবই সহজ, শুধুমাত্র flex-video ক্লাস যোগ করতে হয়।
3. ভিডিও কন্টেন্টের সুনির্দিষ্ট নিয়ন্ত্রণ: Foundation ফ্রেমওয়ার্ক ভিডিও এমবেডের কাস্টমাইজেশনের জন্য বিভিন্ন টুলস এবং ক্লাস সরবরাহ করে, যা ডেভেলপারদের আরো কাস্টম লেআউট তৈরি করতে সহায়তা করে।

Foundation ফ্রেমওয়ার্ক ভিডিও এমবেড করার জন্য একটি শক্তিশালী এবং সহজ উপায় প্রদান করে। এর flex-video ক্লাসটি ভিডিও কন্টেন্টকে রেসপনসিভ করে, যাতে তা মোবাইল, ট্যাবলেট এবং ডেস্কটপে সুন্দরভাবে প্রদর্শিত হয়। এই সুবিধার মাধ্যমে আপনি যেকোনো ভিডিও প্লাটফর্মের ভিডিও সহজেই ওয়েবসাইটে এমবেড করতে পারেন এবং ডিজাইনটিকে মোবাইল-ফার্স্ট অ্যাপ্রোচে তৈরি করতে পারেন।

Foundation ফ্রেমওয়ার্কের একটি বিশেষ বৈশিষ্ট্য হলো Flex Video, যা ভিডিও কন্টেন্টকে বিভিন্ন ডিভাইসে রেসপনসিভভাবে প্রদর্শন করতে সাহায্য করে। সাধারণত, ভিডিওগুলি সঠিক স্কেল এবং লেআউট পেতে বেশিরভাগ সময় কাস্টম কোডিং বা CSS প্রয়োজন হয়। Foundation এর Flex Video ক্লাস এই প্রক্রিয়াটি সহজ করে দেয়।

Flex Video এর সুবিধা:

1. রেসপনসিভ ভিডিও: Flex Video ব্যবহার করলে ভিডিও স্বয়ংক্রিয়ভাবে স্ক্রীনের আকার অনুযায়ী অটোমেটিক রিসাইজ হয়ে যায়।
2. আনকাজে থাকা স্টাইল: এটি কোন অতিরিক্ত CSS কোড না লিখেই ভিডিও এলিমেন্টকে উপযুক্ত আকারে প্রদর্শন করতে সক্ষম।
3. সহজ ইমপ্লিমেন্টেশন: একটি সহজ ক্লাস যুক্ত করে আপনি ভিডিওগুলোকে রেসপনসিভ করতে পারেন, যার ফলে কোড লেখা এবং কাস্টমাইজেশন আরও সহজ হয়ে যায়।

Flex Video ব্যবহার করা

Foundation ফ্রেমওয়ার্কে Flex Video ব্যবহার করতে আপনাকে শুধুমাত্র flex-video ক্লাসটি ভিডিও কন্টেইনারের উপর প্রয়োগ করতে হবে। এটি ভিডিও এলিমেন্টের প্রকৃত আকার এবং অনুপাত (aspect ratio) ধরে রেখে রেসপনসিভ ডিজাইন তৈরি করবে।

Flex Video ব্যবহার করার উদাহরণ:

<div class="flex-video">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

এখানে, flex-video ক্লাসটি ভিডিও কন্টেইনার <div> এর মধ্যে যোগ করা হয়েছে, যাতে ভিডিওটি রেসপনসিভভাবে স্ক্রীনে ফিট হয়।

বিভিন্ন ভিডিও প্ল্যাটফর্মের সাথে Flex Video

Foundation এর Flex Video ফিচারটি অনেক জনপ্রিয় ভিডিও প্ল্যাটফর্মের (যেমন YouTube, Vimeo, Dailymotion) সাথে কাজ করে। নিচে কিছু উদাহরণ দেওয়া হলো:

১. YouTube ভিডিও

<div class="flex-video">
  <iframe src="https://www.youtube.com/embed/your_video_id" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

২. Vimeo ভিডিও

<div class="flex-video">
  <iframe src="https://player.vimeo.com/video/your_video_id" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

৩. Dailymotion ভিডিও

<div class="flex-video">
  <iframe src="https://www.dailymotion.com/embed/video/your_video_id" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Flex Video এর কার্যকারিতা

Foundation এর Flex Video ক্লাস ব্যবহার করার মাধ্যমে, ভিডিওর অরিজিনাল আকার বা অ্যানিমেশন হুবহু রাখা সম্ভব। এটি ভিডিও এলিমেন্টের aspect ratio ধরে রেখে সেটি স্ক্রীনের উপযুক্ত আকারে রিসাইজ করে দেয়। ফলে ভিডিও কনটেন্ট মোবাইল, ট্যাবলেট, ডেস্কটপসহ যেকোনো ডিভাইসে একদম সঠিকভাবে প্রদর্শিত হয়।

ভিডিওর aspect ratio:

Foundation স্বয়ংক্রিয়ভাবে ভিডিওর প্রস্থ এবং উচ্চতা ঠিক রাখতে সাহায্য করে, যাতে ভিডিওটি তার অরিজিনাল প্রোপোরশন অনুযায়ী স্কেল হয়। এর ফলে, বিভিন্ন ডিভাইসের স্ক্রীনে ভিডিও দেখার সময় এটি বিকৃত হয় না।

আরও কাস্টমাইজেশন

আপনি চাইলে Flex Video এর মাধ্যমে কাস্টম ভিডিও সাইজিং এবং অবস্থান নিয়ন্ত্রণ করতে পারেন। উদাহরণস্বরূপ, যদি আপনি ভিডিওটিকে সেন্টারে রাখতে চান, তাহলে Flexbox এর ক্ষমতা ব্যবহার করতে পারেন।

সেন্টার করা ভিডিও:

<div class="row">
  <div class="small-12 medium-8 large-6 columns">
    <div class="flex-video">
      <iframe src="https://www.youtube.com/embed/your_video_id" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </div>
</div>

এখানে columns ক্লাস ব্যবহার করে ভিডিওকে সেন্টার করা হয়েছে এবং বিভিন্ন স্ক্রীন সাইজের জন্য উপযুক্ত আকার প্রদান করা হয়েছে।

Foundation এর Flex Video ফিচার ভিডিও কন্টেন্টকে রেসপনসিভ এবং প্রোফেশনালভাবে ডিজাইন করতে সহজ করে তোলে। এটি সহজে YouTube, Vimeo, Dailymotion সহ অন্যান্য ভিডিও প্ল্যাটফর্মের সাথে কাজ করে, এবং ভিডিওর প্রোপোরশন সঠিকভাবে ধরে রেখে তা যেকোনো স্ক্রীনে উপযুক্ত আকারে প্রদর্শিত হয়। এই ফিচারটি ব্যবহার করে ডেভেলপাররা খুব সহজেই ভিডিও কন্টেন্টকে মোবাইল, ট্যাবলেট, ডেস্কটপের জন্য অপ্টিমাইজড করতে পারেন।

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 ক্লাস ব্যবহার করে একাধিক ইমেজ প্রদর্শন করা হয়। এটি রেসপনসিভ এবং ব্যবহারকারী-বান্ধব ওয়েবসাইট ডিজাইন তৈরিতে সহায়তা করে।