আমরা যারা ওয়েব ডেভলপিং এ কাজ করি তারা সকলেই এখন jQuery, Mootools ইত্যাদি ব্যবহার করে সুন্দর সুন্দর স্লাইডশো আমাদের সাইটে প্রদর্শন করি। আজকাল আমরা jQuery, Mootools ব্যবহার করে Flash এর চেয়েও ভালো ভালো এবং অনেক হালকা অ্যানিমেশেনের মাধ্যমে আমাদের সাইটের মান বৃদ্ধি করি করি। তাই আমাদের ছবিগুলোকে আরো সুন্দর করে উপস্থাপন করার জন্য আজ আমি jQuery এর একটা প্লগিন নিয়ে আলোচনা করবো এবং জানবো কি করে ব্যবহার করতে হয়।

Supersized একটা jQuey প্লাগিন, যার মাধ্যমে আপনারা আপনাদের ছবির স্লাইডশো করতে পারবেন ইন্টারনেট ব্রাউজারের সম্পূর্ণ পর্দা জুড়ে।আসুন শুরুতে আমরা ডেমো দেখে নেই ।

ডেমো দেখার জন্য এখানে ক্লিক করুন ।

ডেমো ডাউনলোড করার জন্য এখানে ক্লিক করুন ।

Supersized প্লাগিন এর অপশন :

startwidth: 1024,
startheight: 640,
vertical_center: 1,
slideshow: 1,
navigation: 1,
transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
pause_hover: 1,
slide_counter: 1,
slide_captions: 1,
slide_interval: 3000

নিচে অপশগুলোর বর্ণণা করা হলো ...

• startwidth, startheight ছবির Ratio ক্যালকুলেশনের জন্য ব্যবহার করার হয় । এখানে আপনি আপনার সকল ছবি যে সাইজে আছে সেটা লিখবেন ।
• vertical_center এর মান 1 হলে আপনার ছবিকে লম্বাভাবে মাঝখানে রাখবে, 0 হলে মাঝখানে রাখবে না ।
• slideshow এর মান 1 হলে আপনার ছবিগুলোকে স্লাইডশো করবে, 0 হলে স্লাডশো করবে না ।
• navigation এর মান 1 হলে আপনার কন্ট্রোল বাটন দেখাবে , 0 হলে দেখাবে না ।
• transition এর মান 0 থেকে 5 পর্যন্ত পরিবর্তন করে আপনার স্লাইডশো এর ইফেক্ট পরিবর্তন করতে পারবেন ।
• pause_hover এর মান 1 হলে মাউস ছবির উপর থাকলে স্লাইডশো থেমে যাবে ।
• slide_counter এর মান 1 হলে স্লাইডশো দেখাবে ।
• slide_caption এর মান 1 হলে স্লাইডশোতে নাম দেখাবে ।
• slide_interval এর মান 3000 হলে স্লাইডশোতে ছবি ৩ সেকেন্ড পর পর পরিবর্তন হবে ।

আপনারা index.html ফাইলে এইসব অপশন এর মান পরিবর্তন করে আপনার স্লাইডশো কে নিজের মত করে সাজিয়ে নিতে পারবেন ।

আর ছবি পরিবর্তন করার জন্য index.html ফাইলের নিচের অংশ পরিবর্তন করুন ।

<div id="supersize">
<a href="http://www.mehedi.com.bd"><img title="চিতা" src="images/cheetahbeauty.jpg" alt="" /></a>
<a href="http://www.ojana.info"><img title="বাঁশ" src="images/bamboo.jpg" alt="" /></a>
<a href="http://www.banglarkobi.com"><img title="সবুজ পৃথিবী" src="images/worldongreenleaf.jpg" alt="" /></a>
</div>

এখানে আপনি নতুন ছবি যোগ করতে চাইলে images ফোল্ডারে ছবি লোড করে উপরের কোডের ভেতরে নতুন ছবির লিংক যোগ করুন ।

আশা করি এই প্লাগিন দিয়ে আপনারা আপনাদের সাইটের ছবি দেখার পেজকে আরো সুন্দর করতে পারবেন ।

আপনাদের কোন সমস্যা হলে আমাকে জানাবেন ।