ফটোগ্যালারি বা ফটো এলবাম- কোন ওয়েবসাইটে, মূলত ব্যক্তিগত ওয়েবসাইটের বহুল ব্যবহৃত একটি বিষয়। ওয়েবসাইটে ফটোগ্যালারি সংজোযন করার কাজটি, বিশেষ করে যখন অনেক বেশি ফটো থাকে তখন তা ওয়েবসাইটে প্রদর্শন যে কতটুকু ঝামেলার কাজ তা একজন ওয়েব ডিজাইনার ই বুঝতে পারেন। কিন্তু অনেকে হয়ত জানেননা এই কাজটি কত সহজে এবং নির্ঝঞ্ঝাটে সম্পন্ন করা যায়। আমি আপনাদেরকে একটি অত্যন্ত সহজ ফটোগ্যালারি তৈরির পদ্ধতি দেখাব যার মাধ্যমে আপনি শখানেক, এমনকি হাজারখানেক ফটো আপনার ওয়েবপেজে দেখাতে পারবেন, কেবল একটি ২০০-৩০০বাইটের প্রোগ্রাম লিখে! চলুন দেখে আসি কিভাবে তা সম্ভব।

এই কাজটি সম্পন্ন করতে আমি ব্যবহার করেছি জাভাস্ক্রিপ্ট প্রোগ্রামিং ল্যাঙ্গুয়েজের লুপিং সম্পর্কিত মেথড while। প্রথমেই আমি প্রোগ্রামটি আপনাদের দেখাচ্ছি যেন আপনাদের বুঝতে সুবিধা হয়।

<script>a=0; b=100; while(a<b){ document.write(‘<a href=pic’+a+’.jpg><img width=100 height=100 border=0 src=pic’+a+’.jpg alt=’+a+’></a>&nbsp;’); a++ }</script>

এই কোডটি ওয়েবপেজে প্রয়োগ করলে এটি ১০০ টি ছবির একটি ফটোগ্যালারি তৈরি করবে, এবং ছবিগুলোকে অবশ্যই ক্রমানুসারে এবং একই নামধারী হতে হবে। এই কোডে ছবির নাম pic দেয়া রয়েছে, তাই ছবিগুলোকে অবশ্যই pic0.jpg, pic1.jpg, pic2.jpg, pic3.jpg… এই ক্রমে থাকতে হবে। এবং আরো একটি বিষয় খেয়াল করে দেখুন, এই কোডে a এবং b এই দুইটি চলক ব্যবহৃত হয়েছে যার মধ্যে a চলকটি ছবির ক্রম কত থেকে শুরু হবে তা নির্দেশ করে, যেমন এখানে a=0 দেয়া রয়েছে, তার মানে প্রথম ছবিটির নাম pic0 হবে। যদি a=3 হত তবে প্রথম ছবিটির নাম pic3 হত এবং ফটোগ্যালারির ক্রম pic3.jpg, pic4.jpg, pic5.jpg… এভাবে যেত। অপরদিকে b=100 মানে ফটোগ্যালারিতে ১০০ টি ফটো থাকবে, অর্থাৎ শেষের ফটোটির নাম pic99.jpg হত (যেহেতু ০ থেকে ৯৯- মোট ১০০ টি ফটো)। এখানে প্রতিটি ছবি থাম্বনেইল আকারে (১০০*১০০পিক্সেলস) দেখাবে এবং ছবিগুলোর থাম্বনেইলের সাথে মূল ছবির হাইপারলিঙ্ক করা রয়েছে, তাই থাম্বনেইলে ক্লিক করলেই মূল ছবি ওপেন হবে।

উপরোল্লিখিত কোডটি কপি করে আপনার ওয়েবপেজে পেস্ট করুন এবং যেই ফোল্ডারে ওয়েবপেজটি আছে ওই ফোল্ডারেই ছবিগুলো অর্থাৎ ইমেজ ফাইলগুলো রাখুন। এবার আপনার ওয়েবপেজটি খুললেই পেয়ে যাবেন আপনার ফটোগ্যালারি।

এই কোডটি সঠিকভাবে প্রদর্শনের ক্ষেত্রে বিবেচ্য বিষয়ঃ
এই কোডটি সঠিকভাবে প্রদর্শন করতে নিচের বিষয়গুলো অবশ্যই মাথায় রাখবেন। এগুলো ভুল হলে কোড ঠিকমত কাজ করবে না।

  • ব্রাউজারে অবশ্যই জাভাস্ক্রিপ্ট অন থাকতে হবে।
  • ইমেজ ফাইলগুলো অবশ্যই ক্রমানুসারে থাকতে হবে।
  • ইমেজ ফাইলগুলোর নাম অবশ্যই একই হতে হবে (উপরের প্রোগ্রামের ক্ষেত্রে pic0.jpg, pic1.jpg, pic2.jpg)।
  • এক্সটেনশন ঠিকভাবে বসাতে হবে (উপরের প্রোগ্রামের ক্ষেত্রে যেখানে .jpg লেখা ছিল সেখানেই এক্সটেনশন লিখতে হবে, উদাহরনঃ .jpg, .png, .gif, .tif ইত্যাদি)।
  • যেসকল ব্রাউজারে জাভাস্ক্রিপ্ট সমর্থন করেনা সেসব ব্রাউজারের জন্য এই প্রোগ্রামটি প্রযোজ্য নয়।

আপনি আরো যা করতে পারেনঃ
আপনি এই কোডটির মধ্যে যেসকল বিষয় পরিবর্তন করতে পারেন সেগুলো হল-

  • a চলক পরিবর্তন করে আপনার ছবির ক্রম কত থেকে শুরু হবে তা নির্ধারন করতে পারেন।
  • b চলক পরিবর্তন করে আপনার ছবির ক্রম কত তে গিয়ে শেষ হবে তা নির্ধারন করতে পারেন।
  • Width এবং height পরিবর্তন করতে পারেন।

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

comments

12 কমেন্টস

    • এইটা কেন কাজ করে নাই জানেন? কারণ বিজ্ঞানপ্রযুক্তিতে ব্লগ পোস্টে ‘ এবং ” চিহ্ন পরিবর্তিত হয়। কোড এর যেখানে ‘ চিহ্ন আছে সেগুলো মুছে আপনার কী-বোর্ড থেকে চিহ্নগুলো বসান। আপনার জন্য এইটার একটা ফাইল আপলোড করলাম, এখান থেকে কোড টা দেখে নেনঃ http://zinzeera.110mb.com/example.htm

    • তবে টাইমের বিষয়টা বুঝলাম না, আপনি টাইম বলতে আসলে কি বুঝালেন। আপনি কি setTimeout এর কথা বললেন নাকি? দয়া করে জানাবেন। সহযোগীতার জন্য ধন্যবাদ 🙂

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Time limit is exhausted. Please reload the CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.