Materialize CSS ফ্রেমওয়ার্কে Materialbox একটি শক্তিশালী ফিচার যা ইমেজ প্রদর্শনের জন্য ব্যবহৃত হয়। এটি ব্যবহারকারীকে একটি সুন্দর এবং ইন্টারঅ্যাকটিভ ইমেজ জুম বা পপ-আপ ভিউ প্রদান করে। Materialbox এর মাধ্যমে আপনি ইমেজকে স্ন্যাপশট আকারে বা পূর্ণ-আকারে দেখতে পারবেন, যা ইমেজের উপরে ক্লিক করার মাধ্যমে প্রদর্শিত হয়।
এটি মূলত গ্যালারি বা ইমেজ স্লাইডশো তৈরিতে ব্যবহার করা হয়, যেখানে ব্যবহারকারী ইমেজের উপর ক্লিক করলে ইমেজটি বড় আকারে প্রদর্শিত হবে এবং সেই সাথে স্ক্রীনের মাঝখানে সুন্দরভাবে জুম ইন হবে।
Materialize এর Image Materialbox ব্যবহার করা
Materialbox ইমেজ দেখানোর জন্য খুবই জনপ্রিয় একটি টুল, যা সহজেই ইমেজের পূর্ণ স্ক্রীন ভিউ তৈরি করে। এখানে Materialbox ইমেজ ব্যবহারের ধাপগুলো বিস্তারিতভাবে আলোচনা করা হলো।
১. HTML স্ট্রাকচার
Materialize এর Materialbox ব্যবহার করতে, প্রথমে আপনাকে ইমেজের জন্য একটি সাধারণ HTML কোড তৈরি করতে হবে। এছাড়া আপনাকে Materialbox ক্লাস যুক্ত করতে হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Materialbox Example</title>
<!-- Materialize CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Image with Materialbox class -->
<img class="materialboxed" width="650" src="https://via.placeholder.com/600x400" alt="Image">
<!-- Materialize JS and jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Initialize Materialbox -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.materialboxed');
var instances = M.Materialbox.init(elems);
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- class="materialboxed": এই ক্লাসটি Materialbox ফিচারটি সক্রিয় করতে ব্যবহৃত হয়।
- width="650": এখানে ইমেজের আকার নির্ধারণ করা হয়েছে, তবে এটি আপনার প্রয়োজন অনুযায়ী পরিবর্তন করতে পারেন।
- src="URL": ইমেজের সোর্স বা লিংক।
- M.Materialbox.init(elems): এটি Materialbox ফিচারটি সক্রিয় করতে ব্যবহৃত হয়।
এখানে একটি সাধারণ ইমেজের উদাহরণ দেয়া হয়েছে, যা ক্লিক করলে পূর্ণ-আকারে প্রদর্শিত হবে।
২. Multiple Images with Materialbox
আপনি একাধিক ইমেজের জন্য Materialbox ব্যবহার করতে পারেন, যেমন একটি গ্যালারি তৈরি করতে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Materialbox Gallery</title>
<!-- Materialize CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="col s4">
<img class="materialboxed" width="100%" src="https://via.placeholder.com/400x300" alt="Image 1">
</div>
<div class="col s4">
<img class="materialboxed" width="100%" src="https://via.placeholder.com/400x300" alt="Image 2">
</div>
<div class="col s4">
<img class="materialboxed" width="100%" src="https://via.placeholder.com/400x300" alt="Image 3">
</div>
</div>
<!-- Materialize JS and jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Initialize Materialbox -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.materialboxed');
var instances = M.Materialbox.init(elems);
});
</script>
</body>
</html>
এখানে, Materialbox ক্লাসটি একাধিক ইমেজে প্রয়োগ করা হয়েছে। যখন ব্যবহারকারী একটি ইমেজে ক্লিক করবেন, সেই ইমেজটি বড় হয়ে স্ক্রীনের মাঝখানে প্রদর্শিত হবে।
Materialbox এর কাস্টমাইজেশন
Materialize CSS এর Materialbox ব্যবহার করে আপনি ইমেজের আকার, এনিমেশন এবং অন্যান্য স্টাইল কাস্টমাইজ করতে পারবেন। কিছু সাধারণ কাস্টমাইজেশন অপশন হলো:
১. Animation Duration
Materialbox এর animation duration নির্ধারণ করতে, আপনি inDuration এবং outDuration অপশন ব্যবহার করতে পারেন।
M.Materialbox.init(elems, {
inDuration: 300, // Animation time when the image zooms in (milliseconds)
outDuration: 200 // Animation time when the image zooms out (milliseconds)
});
২. Full-Screen Mode
Materialbox ইমেজের জন্য আপনি full-screen mode যোগ করতে পারেন, যাতে ইমেজটি পূর্ণ পর্দায় প্রদর্শিত হয়।
M.Materialbox.init(elems, {
fullScreen: true
});
উপসংহার
Materialize CSS এর Materialbox ফিচারটি ইমেজ দেখানোর জন্য একটি অত্যন্ত কার্যকরী এবং ইন্টারঅ্যাকটিভ উপাদান। এটি আপনাকে সুন্দরভাবে ইমেজ জুম বা পপ-আপ ভিউ প্রদর্শন করতে সাহায্য করে, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে। আপনি সহজেই এক বা একাধিক ইমেজের জন্য Materialbox ব্যবহার করতে পারেন এবং এটি কাস্টমাইজ করতে পারেন যাতে আপনার ডিজাইন আরও আকর্ষণীয় এবং ফাংশনাল হয়।
Read more
