Foundation এর Joyride Plugin এর মাধ্যমে User Tour তৈরি

Joyride হল Foundation এর একটি JavaScript প্লাগইন যা ব্যবহারকারীদের জন্য interactive tour তৈরি করতে ব্যবহৃত হয়। এটি ওয়েবসাইট বা অ্যাপ্লিকেশনের প্রধান বৈশিষ্ট্যগুলি বা কার্যকারিতা ব্যবহারকারীদের দেখাতে সহায়তা করে, যাতে তারা আরও সহজে এবং দ্রুত বুঝতে পারে যে কোন অংশে কি কাজ করা যায়। Joyride প্লাগইনটি মূলত step-by-step গাইড হিসেবে কাজ করে, যেখানে ব্যবহারকারীরা প্রতিটি পর্যায়ে গিয়ে বিভিন্ন নির্দেশনা দেখতে পান।

Foundation এর Joyride প্লাগইনটি ওয়েবসাইট বা অ্যাপ্লিকেশনের জন্য খুবই কার্যকরী, কারণ এটি সহজে কাস্টমাইজ করা যায় এবং ওয়েবসাইটের ডিজাইনের সাথে মিলে যায়।

Foundation এর Joyride Plugin ব্যবহার করে User Tour তৈরি করার ধাপ

১. Foundation Joyride Plugin ইনস্টল করা

Foundation এর Joyride প্লাগইন ব্যবহারের জন্য প্রথমে Foundation ফ্রেমওয়ার্ক এবং Joyride প্লাগইন লিঙ্ক অন্তর্ভুক্ত করতে হবে।

১.১. CDN থেকে Joyride লিঙ্ক যোগ করা

HTML ফাইলে Foundation এবং Joyride প্লাগইনের CSS এবং JavaScript লিঙ্ক যোগ করুন।

<!-- Foundation CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.5/css/foundation.min.css">

<!-- Joyride CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.5/css/joyride-2.1.0.min.css">

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Foundation JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.5/js/foundation.min.js"></script>

<!-- Joyride JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.5/js/joyride-2.1.0.min.js"></script>

১.২. Foundation ও Joyride ইনিশিয়ালাইজ করা

<script>
  $(document).ready(function() {
    $(document).foundation();
    $('#start-tour').joyride();
  });
</script>

এটি Foundation এবং Joyride প্লাগইন সঠিকভাবে কাজ করতে সক্ষম করবে।

২. Joyride Tour তৈরি করা

Joyride প্লাগইন ব্যবহার করে step-by-step গাইড তৈরি করা যায়। এটি বিভিন্ন ট্যাগে data-joyride অ্যাট্রিবিউট ব্যবহার করে কাজ করে। প্রতি "স্টেপ" এর জন্য data-id এবং data-text যুক্ত করতে হয়, যাতে ব্যবহারকারীরা এগুলো দেখতে পান।

২.১. HTML ফর্ম্যাট তৈরি করা

<div id="start-tour" class="button">
  Start Tour
</div>

<div class="tour-step" data-joyride>
  <p>This is step 1 of your user tour</p>
</div>

<div class="tour-step" data-joyride>
  <p>This is step 2. Here is some more information.</p>
</div>

<div class="tour-step" data-joyride>
  <p>Final step. You are all set now!</p>
</div>

এখানে:

• <div class="tour-step" data-joyride>: এই এলিমেন্টগুলির মধ্যে আপনার গাইডের স্টেপ থাকবে।
• data-joyride: প্রতিটি ট্যাগে এই অ্যাট্রিবিউটটি ব্যবহার করা হয়, যা Joyride প্লাগইনকে জানায় যে এটি একটি ট্যুর স্টেপ।

২.২. Joyride ট্যুর কনফিগারেশন

আপনি Joyride ট্যুরে বিভিন্ন কনফিগারেশন যেমন স্টেপের অবস্থান, টিপ, স্টেপের পরিমাণ ইত্যাদি কাস্টমাইজ করতে পারবেন। উদাহরণস্বরূপ:

<script>
  $(document).ready(function() {
    $(document).foundation();

    // Joyride configuration
    $('#start-tour').joyride({
      'modal': true, // Modal mode to make it more interactive
      'tipLocation': 'top', // Shows the tip at the top of the element
      'nextButton': true, // Next button to move to the next step
      'prevButton': true, // Previous button for navigating backward
      'scrollSpeed': 300 // Speed of scrolling between steps
    });
  });
</script>

এখানে:

• modal: true: এটি ট্যুরের মুডাল তৈরি করে, যাতে পরবর্তী বা পূর্ববর্তী স্টেপ দেখতে সহজ হয়।
• tipLocation: প্রতিটি ট্যুর স্টেপের টিপের অবস্থান নির্ধারণ করা হয় (উপর, নিচ, বাম, ডান)।
• nextButton: পরবর্তী বাটন সক্রিয় করে।
• prevButton: পূর্ববর্তী বাটন সক্রিয় করে।

৩. ট্যুরে স্টেপ এবং বাটন কাস্টমাইজ করা

আপনি Joyride প্লাগইনে প্রাপ্ত বিভিন্ন স্টেপ এবং বাটনের কাস্টমাইজেশন করতে পারেন:

৩.১. কাস্টম স্টাইলিং

.tour-step {
  background-color: #f9f9f9;
  border: 2px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

৩.২. কাস্টম বাটন

আপনি "Next" এবং "Prev" বাটনগুলিকে কাস্টম ডিজাইন করতে পারেন:

.joyride-next-tip, .joyride-prev-tip {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.joyride-next-tip:hover, .joyride-prev-tip:hover {
  background-color: #45a049;
}

Foundation এর Joyride Plugin ব্যবহার করে আপনি সহজেই একটি User Tour তৈরি করতে পারেন, যা আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনের প্রধান বৈশিষ্ট্যগুলো ব্যবহারকারীদের সাথে ইন্টারঅ্যাক্টিভভাবে শেয়ার করতে সাহায্য করে। Joyride এর মাধ্যমে আপনি step-by-step গাইড তৈরি করতে পারবেন, যা ব্যবহারকারীদের জন্য ওয়েবসাইটে নেভিগেশন সহজ ও আকর্ষণীয় করে তোলে। এছাড়া, এটি ব্যবহারকারী অভিজ্ঞতা উন্নত করার জন্য কাস্টমাইজেশন এবং স্টাইলিংয়ের বেশ কিছু সুবিধা প্রদান করে।