আমি Techtunes এর একজন ভক্ত। পড়ালেখা Pabna Textile Engineering College (3rd Year). Textile এ পড়লেও Internet এর প্রতি অনেক ঝোক, আর তা খেকেই টুকটাক Blogging ও Website Develop করে নিজের মাস খরচটা চালাই। এখানে অনেক বড়ো বড়ো Programmer, Blogger দের আনাগোনা। এর মাঝে নিজেকে খুব ছোট মনে হয়। তারপরও আজ সকালে অনেক সাহস করে একটা tune করতে বসলাম। আসলে অনেক দিন ধরে লেখার try করছি but সাহস পাইনি। আজ আল্লাহর নামে শুরু করলাম। এটি আমার প্রথম Tune. আপনাদের support পেলে আরও অনেক কিছু share করতে পারব ইনশাআল্লাহ।

আমি যে Slideshow টা আজ share করবো সেটা আমার Internet গুরু ফরহাদ ভাই এর কাছে শেখা। ফরহাদ ভাই আমার Internet World এর প্রথম ও শেষ গুরু। উনি একজন বড়ো মাপের Programmer, Web Developer ও SEO Consultant. আমি তার কাছে চিরঋণী।

এখন কাজের কথায় আসি।আমরা অনেকেই নিজের Blog/Website এ Slideshow add করি। অনেকে অনেকভাবে করে থাকেন। আমি আমার Blog/Website এ সবসময় নিজের তৈরি করা Slideshow use করি।এই Slideshow দিয়ে আপনি Visitor কে আপনার ভিন্ন Website এ Redirect করতে পারবেন। আর Website এর Beautification তো থাকছেই।

Example হিসেবে আমার ও ফরহাদ ভাই এর তৈরি আমাদের College এর Blog-site টা দেখতে পারেন। এখানে

আমি এটি করি খুব Simple এক টা JavaScript Code দিয়ে। আপনারাও try করতে পারেন। এর জন্য আপনার যে কোনো Image Hosting (e.g Flickr, Tinypic) এ Account থাকতে হবে। এই Account ফ্রীতেই করা যায়।আপনি যেকোনো Image Hosting Use করতে পারেন। Internet এ এরকম অনেক Site পাবেন।

Image Host এর কাজ হলো আপনি যে Image গুলোর Slideshow করতে চান সেগুল সেখানে Upload করে Image Source গুলো নিতে হবে। এ জন্য আমি Flickr use করি। কারন Flickr এর Image Loading খুব দ্রুত হয়।

Image Source গুলো হবে এরকম>>

http://farm6.static.flickr.com/5204/5335100407_6f929cd5b5_b.jpg

এটা আমাদের College এর Blog এর Slideshow র একটা Image Source. (Flickr এ Upload করা) কিভাবে Flickr এ Account করতে হয় ও Image Upload করে তার Source নিতে হয় তা দেখতে এই Post এর নিচের অংশে যান।

JavaScript Code টা হলো>>>>

-------------------------------------------------------------

<script type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="YYYYYYY"
var image2=new Image()
image2.src="XXXXXXX"
var image3=new Image()
image3.src="XXXXXXX"
var image4=new Image()
image4.src="XXXXXXX"
var image5=new Image()
image5.src="XXXXXXX"
var image6=new Image()
image6.src="XXXXXXX"
var image7=new Image()
image7.src="XXXXXXX"
var image8=new Image()
image8.src="XXXXXXX"
//-->
</script>
<a href="#" target="_blank"><img border="0" src="YYYYYYY" name="slide" /></a>

<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<8)
step++
else
step=1
setTimeout("slideit()",1300)
}
slideit()
function gotoshow(){
if (whichimage==1)
window.location="#"
else if (whichimage==2)
window.location="#"
else if (whichimage==3)
window.location="#"
else if (whichimage==4)
window.location="#"
else if (whichimage==5)
window.location="#"
else if (whichimage==6)
window.location="#"
else if (whichimage==7)
window.location="#"
else if (whichimage==8)
window.location="#"
}
//-->
</script>

-------------------------------------------------------------

Code এর পরিচিতি>>>

এখানে আমি ৮ টা Image use করেছি।YYYYYYY ও XXXXXXX দিয়ে আমি Image Source টা বুঝিয়েছি। ৮ টা Image এর জন্য ৮ টা Source থাকবে। প্রথম Image Source টা use হবে ২ বার। আপনি Code টা দেখলেই বুঝতে পারবেন। YYYYYYY ২ বার আছে।

<a href="#" target="_blank"><img border="0" src="YYYYYYY" name="slide" /></a>

এই লাইনের # এর জায়গায় আপনি অন্য Site এর URL use করতে পারেন। না করলেও চলবে। এখানে Slideshow র width=200 ও height=400 করা আছে। আপনি নিজের সুবিধা মত করে নিন। তবে খেয়াল রাখবেন যেন আপনার Image এর Hight and Width ও Slideshow এর Hight and Width একি হয়। না হলে Slideshow Fade up হয়ে যাবে।

setTimeout("slideit()",1300)

এখানে Timeout 1300 দেয়া আছে। নিজের মত change করে কম বেশি করে নিন।

এই হল Slideshow Editing.

কিভাবে Blog/Website এ add করবেন?

ব্লগ এর জন্য Simple একটা HTML/JavaScript Gadget open করে Code টা Copy > Paste করুন। Save করে বেরিয়ে আসুন। এবার Blog Reload করে দেখুন। আর Gadget টা পেইজ এর position ও Slideshow এর Hight and Width অনুযায়ী বসাবেন।

অন্য Website এর জন্য আপনি যেখানে Slideshow দেখতে চান সেখানে Code টা add করে নিন।

যেভাবে Flickr এ Account করতে হয় ও Image Upload করে তার Source নিতে হয়ঃ

>>> একটা Yahoo Account করে নিন। থাকলে তো হয়েই গেল।এখন Google ও Facebook ID দিয়েও Yahoo তে Account করা যায়।

>>> প্রথমে http://www.flickr.com/ এখানে যান।

>>> উপরে ডান পাশে Create Your Account click করুন।

>>>একটা Pop Up Window আসবে।সেখানে Yahoo Mail ID ও Password দিয়ে Sign In click করুন।

>>>Pop Up close হয়ে যাবে এবং নিউ পেইজ এ "Chose your screen name" box এ একটা নাম দিন।

>>>এখন পেইজ এ Upload Photos & Videos Click করুন।

>>>এবার Chose Photos & Videos Click করে Pop Up window থেকে আপনার Slideshow র Image file গুলো Select করে দিন।

>>>এখন Upload Photos & Videos Click করলে Image Uploading শুরু হবে।

>>>পরের Page এ Add a description click করুন। পরের পেইজ এ Save Button Click করুন।

>>>এখানে আপনার Upload করা Image গুলো Show করবে।

>>>এখন এক এক করে Image গুলো Click করলে Image বড়ো করে খুলবে। এই পেইজ এ একটা একটা করে Image দেখাবে।

>>>এখন Keyboard থেকে Control+U চাপুন(Firefox ও Epic এর জন্য)। Different Browser এর জন্য Right Click করে View Page Source Click করুন।

>>>একটা new window খুলবে। Control + F চেপে Find Box এ jpg লিখুন(jpg format এর image এর জন্য)।{ আপনি যে format এর Image Upload করবেন সেইটা লিখুন}

>>>নিচের মত একটা Code Find হবে।

<link rel="image_src" href="http://farm6.static.flickr.com/5218/5426978555_73d9c4f787_m.jpg"><link

>>> আপনি http://farm6.static.flickr.com/5218/5426978555_73d9c4f787_m.jpg এই টুকু নিন এবং m.jpg কে z.jpg করে নিন। এটাই হল আপনার Image Source.

>>>এভাবে সবগুলো Image এর Source বের করে নিন। তারপর উপরের JavaScript Code এ use করুন।

ভালো লাগলে বা কারও কাজে আসলে আমার লেখা সফল হবে। ধন্যবাদ পরার জন্য।

Screen Shot দিতে পারলাম না। Techtunes এর Server অনেক busy. Image Upload হচ্ছে না। পরে দিতে পারলে দিয়ে দিব ইনশাআল্লাহ।

ভালো থাকবেন।