এই কাজটি করার জনপ্রিয় একটি টুল হল Lytebox, এর মাধ্যমে শুধু ছবি নয়, একটি সম্পূর্ণ ওয়েবসাইটকেও ফ্রেমের মধ্যে একটু অন্যরকমভাবে উপস্থাপন করা যায়। নিচের ছবিগুলো দেখুনঃ
Use lytebox on your photo blog. It is a real funny way to make some special effect on images.
ছবি ১:
একটি ছবিকে ফ্রেমের মধ্যে দেখা যাচ্ছে। চারপাশ কালো হয়ে গেছে। মাঝখানে ছবিটি স্পষ্টভাবে জ্বলজ্বল করছে।ছবি ২:
একটি সম্পূর্ণ ওয়েবসাইটকে ফ্রেমের মধ্যে দেখানো হয়েছে। আপনার ব্লগের কোন পোস্টে লিঙ্ক করা ওয়েবসাইট ভিজিট করার জন্য পাঠককে আর ব্লগ ছেড়ে চলে যেতে হবে না। কিংবা আলাদা ট্যাব খুলতে হবে না।ছবি ৩:
এটা কয়েকটি ছবি দিয়ে তৈরি একটি গ্রুপ ফ্রেম। প্রদর্শিত ছবির উপর মাউস নিয়ে গেলে Next Button দেখা যাবে ডানপাশে আর বামপাশে দেখা যাবে Previous Buttonছবি ৪:
এটা স্লাইড শো। কয়েকটি ছবি মিলে তৈরি। পরবর্তী ছবি দেখার জন্য "গ্রুপ ইমেজ" ফ্রেমে যেমন Next বোতাম চাপতে হতো, তেমন করে এখানে কোন বোতাম নেই। স্বয়ংক্রিয়ভাবে পরপর ছবি দেখাতে থাকবে।তো, এতসব ইফেক্ট আপনার ব্লগার.কম এ খোলা ব্লগে কিভাবে আনবেন? খুব সহজে এটা করা সম্ভব।
It is very easy to implement lytebox effect in blogger.com blog.
- ব্লগার.কম এ লগইন করুন।
- Layout> Edit HTML ট্যাবে যান। সেখানে <head> এর পরে নিচের কোডটি স্থাপন করুন।
<script language='javascript' src='http://sites.google.com/site/banglahacks/lyteboxfiles/lytebox.js' type='text/javascript'/>
<link href='http://sites.google.com/site/banglahacks/lyteboxfiles/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>- সেভ করুন।
- ব্যাস প্রাথমিক কাজ হয়ে গেল। আপনার ব্লগ এখন Lytebox জাভাস্ক্রিপ্ট দিয়ে ইমেজগুলোকে বিশেষ ইফেক্টের মাধ্যমে প্রদর্শন করার জন্য প্রস্তুত।
১.১। ডাইরেক্ট লিংকযুক্ত কোন ছবিঃ
<a rel="lytebox" href="http://sites.google.com/site/banglahacks/tools/presentbox.png" title="This is a little gift from me."> <img style="width: 95px; height: 95px;" src="http://sites.google.com/site/banglahacks/tools/presentbox.png" alt="Image check" /></a>উপরের কোডে বিশেষভাবে rel="lytebox" কোডটি লক্ষ্য করুন। এই কোডটি ছবির লিংকে বসাতেই হবে।
১.২। ব্লগারে আপলোড করা ছবিঃ
ব্লগারে কোন ছবি আপলোড করলে সাধারণত নিচের কোডের মতো কোড তৈরি হয়। (এটা পোস্ট এডিটরে Edit Html ট্যাবে ক্লিক করলে দেখা যায়। আপনাকে এই ট্যাবেই কাজ করতে হবে)
<a rel="lytebox" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQeZ1smXMcioKs6Mvx0NcMEu0fNCEnirhr-RlxGAKYZj-yaTRgfxBVR7J_vBJzp9Wk_abuBXm0Q9Ke2SfGVmAMtizwxG9X3wHtZ6Sxxca9shAUn1oYJoS65ltsOOvugvnOqadEbeNnToc/s1600/loginscreen.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 169px; height: 125px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQeZ1smXMcioKs6Mvx0NcMEu0fNCEnirhr-RlxGAKYZj-yaTRgfxBVR7J_vBJzp9Wk_abuBXm0Q9Ke2SfGVmAMtizwxG9X3wHtZ6Sxxca9shAUn1oYJoS65ltsOOvugvnOqadEbeNnToc/s320/loginscreen.png" alt="lubuntu10.04 login screen" title="Lubuntu Linux based on LXDE" id="BLOGGER_PHOTO_ID_5443749782829202914" border="0" /></a>এখানে সাধারণত আপলোড করা ছবির দুইটি লিংক থাকে। এর মধ্যে যে লিংকের মধ্যে লেখা আছে s1600-h। এখানে -h লেখাটি মুছে দিন। তারপর যথারীতি rel="lytebox" লিখে দিন। পোস্টটি প্রকাশ করুন। হয়ে গেল।
২। ওয়েবসাইটকে ফ্রেমের মধ্যে দেখানোঃ
এর জন্য কোড হবে নিচের মতো:-
<a href="http://www.google.com/" rel="lyteframe" title="Search Google" rev="width: 500px; height: 400px; scrolling: no;">Google Search</a>এখানে দুটো বিষয় খেয়াল রাখতে হবে। rel="lyteframe" এবং rev । যে আকারের ফ্রেমে ওয়েবসাইটটি দেখা চান, তা এই rev এর পরে লিখে দিতে হবে। যেমন আমি গুগল.কম দেখতে চেয়েছি width: 500px; height: 400px আকারের ফ্রেমে এবং "বাংলা হ্যাকস" সাইটটি দেখতে চেয়েছি width: 900px; height: 400px আকারের ফ্রেমে।
<a href="http://www.banglahacks.com/" rel="lyteframe" title="Bangla hacks" rev="width: 900px; height: 400px; scrolling: no;">Bangla Hacks</a>
৩। গ্রুপ ফ্রেমে একাধিক ছবি দেখানোঃ
এর জন্য কোড হচ্ছে
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi6ClbXJk5V7GUpkx7AVtDkx-ej0CZzSj4Ox2uWKp6MKpoPZOPFylI3JZTGk_3h_bzuMfO_VMkakTZlUkZ-NavXb4H6ncIDT9KJ9crb8iJIUjVQgLyIZqtG_9DiouFOxz1gc-1yw1tnoY/s200/ubuntufader.png" rel="lytebox[Ubuntu]" title="Ubuntu Fader">Ubuntu Fader</a>এখানে আমি চারটি ছবি ব্যবহার করেছি। পরপর ছবির লিংকগুলো দিয়ে দিতে হবে। এবং rel কোড হিসেবে দিতে হবে lytebox[Ubuntu] এখানে Ubuntu হল গ্রুপ নাম। rel="lytebox[Ubuntu]" প্রত্যেকটা ছবির মধ্যেই দিতে হবে।
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju6zLfSoUzkHojc3z38YLEDdSETgFfoZuLNfqyAN7o74_-8fZbz-0rGZ45apuTAINJ4-s0iPZvbHXmwkMey2d7rTqpexIuMOmaUrkePzULkOGxptakXBYiT8nW7Yb4irqhY-Wrt8Z2VgY/s200/ubuntu-logo2.jpg" rel="lytebox[Ubuntu]" title="Ubuntu Logo">Ubuntu Logo</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf5Ql_hgya2Q_Xyh963hLbhy2DwN38D4VY4EV-F1v515c4q0IRrh80OJP0ARQYBl7ZaudpCAj9zx4eY4rFeOF_K_MnZ8WhaRPT6jWQ51f5atwDuuubGQUzgzIi0FYE9f_7bGoUhyphenhyphenEU6xY/s200/NASA.jpg" rel="lytebox[Ubuntu]" title="Nasa Image. Spacecraft start to space.">Nasa Image. Spacecraft start to space.</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYhhYuAmuRIJ7FqeXO61fbCO9_-E25MPnkTHvU7a77M-_5FhLIqOsj2PvVQmIE_mJUKDfY00vv84Pc21ffJTDdkjvRhgDnF-nELSHWKMROAzpKifT2U-28zdOhEURu1Ka0Y2_2YCqIgNg/s200/ubuntulogocopy.jpg" rel="lytebox[Ubuntu]" title="Ubuntu Logo Desktop Wallpaper">Ubuntu Logo Desktop Wallpaper</a>
৪। স্লাইড শো তৈরিঃ
ফ্রেমের মধ্যে স্লাইড শো তৈরি করা Lytebox দিয়ে খুব সহজ। নিচের কোডটি দেখুন
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi6ClbXJk5V7GUpkx7AVtDkx-ej0CZzSj4Ox2uWKp6MKpoPZOPFylI3JZTGk_3h_bzuMfO_VMkakTZlUkZ-NavXb4H6ncIDT9KJ9crb8iJIUjVQgLyIZqtG_9DiouFOxz1gc-1yw1tnoY/s200/ubuntufader.png" rel="lyteshow[Ubuntu]" title="Ubuntu Fader">Ubuntu Fader</a>এখানে আমি উপরের গ্রুপ শো এর ছবিগুলোই ব্যবহার করেছি। কিন্তু rel হিসেবে ব্যবহার করেছি lyteshow, অতএব সম্পূর্ণ কোডটি হয়ে দাড়িয়েছে rel="lyteshow[Ubuntu]"। এখানে Ubuntu হলো স্লাইডটির নাম।
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju6zLfSoUzkHojc3z38YLEDdSETgFfoZuLNfqyAN7o74_-8fZbz-0rGZ45apuTAINJ4-s0iPZvbHXmwkMey2d7rTqpexIuMOmaUrkePzULkOGxptakXBYiT8nW7Yb4irqhY-Wrt8Z2VgY/s200/ubuntu-logo2.jpg" rel="lyteshow[Ubuntu]" title="Ubuntu Logo">Ubuntu Logo</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf5Ql_hgya2Q_Xyh963hLbhy2DwN38D4VY4EV-F1v515c4q0IRrh80OJP0ARQYBl7ZaudpCAj9zx4eY4rFeOF_K_MnZ8WhaRPT6jWQ51f5atwDuuubGQUzgzIi0FYE9f_7bGoUhyphenhyphenEU6xY/s200/NASA.jpg" rel="lyteshow[Ubuntu]" title="Nasa Image. Spacecraft start to space.">Nasa Image. Spacecraft start to space.</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYhhYuAmuRIJ7FqeXO61fbCO9_-E25MPnkTHvU7a77M-_5FhLIqOsj2PvVQmIE_mJUKDfY00vv84Pc21ffJTDdkjvRhgDnF-nELSHWKMROAzpKifT2U-28zdOhEURu1Ka0Y2_2YCqIgNg/s200/ubuntulogocopy.jpg" rel="lyteshow[Ubuntu]" title="Ubuntu Logo Desktop Wallpaper">Ubuntu Logo Desktop Wallpaper</a>
মনে রাখুন যেঃ
- 'বাংলা হ্যাকস' ব্লগে লাইটবক্স ইফেক্ট প্রয়োগ করা হয় নাই। কিন্তু আপনাদের জন্য একটি ডেমো ব্লগ তৈরি করেছি। সেখানে প্রত্যেকটা ইফেক্টের নমুনা দেখুন এই পোস্টে।
- প্রত্যেকটা ছবির লিংকের মধ্যে title ট্যাগ ব্যবহার করতে হবে।
- ব্লগ সম্পূর্ণ লোড না হওয়া পর্যন্ত Lytebox Effect করবে না।
- ইন্টারনেট এক্সপ্লোরার, অপেরা, ফায়ারফক্স ব্রাউজারে এই কোড সুন্দরভাবে প্রদর্শিত হয়। কোনরকম সমস্যা করে না
- আবিষ্কারকের মূল ওয়েবসাইট ঠিকানা: Lytebox
Hello, I am Aero River. Like to do web tweaking. :)
