হ্যালো বন্ধুরা, কেমন আছেন সকলে? আশা করছি সবাই ভাল আছেন। কেমন চলছে আপনাদের ওয়েব সাইট? নিশ্চই এতদিনে অনেক সুন্দর করে সাজিয়ে তুলেছেন।
আজ অনেক দিন পর আমি আপনাদের সামনে হাজির হলাম সহজ পদ্ধতিতে ওয়েব সাইট তৈরীর ৬ষ্ঠ পর্ব নিয়ে। আশা করি আপনাদের ভাল লাগবে। এবারে আমরা দেখব কিভাবে আপনার সাইটে ইমবেড কোডের ( HTML কোড ) এর মাধ্যমে স্লাইড শো দিতে পারেন। সরাসরি প্রিভিউ দেখুন এখানে
এজন্য আপনাকে শুধু নিচের কোডটি কপি পেস্ট করে Widgets>Embed Code এ দিতে হবে।

<!-- configurable script -->
<script type="text/javascript">
theimage = new Array();

// The dimensions of ALL the images should be the same or some of them may look stretched or reduced in Netscape 4.
// Format: theimage[...]=[image URL, link URL, name/description]
theimage[0]=["http://a4.sphotos.ak.fbcdn.net/hphotos-ak-ash4/388269_286540138054060_100000942271618_849978_1347455580_n.jpg", "", ""];
theimage[1]=["http://a6.sphotos.ak.fbcdn.net/hphotos-ak-ash4/376489_286540348054039_100000942271618_849979_1536664200_n.jpg", "", ""];
theimage[2]=["http://a7.sphotos.ak.fbcdn.net/hphotos-ak-snc7/385828_286542188053855_100000942271618_849980_868443634_n.jpg", "", ""];
theimage[3]=["http://a1.sphotos.ak.fbcdn.net/hphotos-ak-snc7/393658_286544138053660_100000942271618_849981_194976876_n.jpg", "", ""];
theimage[4]=["http://a3.sphotos.ak.fbcdn.net/hphotos-ak-ash4/389943_286545961386811_100000942271618_849982_1490645583_n.jpg", "", ""];

///// Plugin variables

playspeed=3000;// The playspeed determines the delay for the "Play" button in ms
dotrans=1; // if value = 1 then there are transitions played in IE
transtype='revealtrans';// 'blendTrans' or 'revealtrans'
transattributes='0';// duration=seconds,transition=#<24
//#####
//key that holds where in the array currently are
i=0;

//###########################################
window.onload=function(){

	//preload images into browser
	preloadSlide();

	//set transitions
	GetTrans();

	//set the first slide
	SetSlide(0);

	//autoplay
	PlaySlide();
}

//###########################################
function SetSlide(num) {
	//too big
	i=num%theimage.length;
	//too small
	if(i<0)i=theimage.length-1;

	//switch the image
	if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Apply()')
	document.images.imgslide.src=theimage[i][0];
	if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Play()')

}

//###########################################
function PlaySlide() {
	if (!window.playing) {
		PlayingSlide(i+1);
		if(document.slideshow.play){
			document.slideshow.play.value="   Stop   ";
		}
	}
	else {
		playing=clearTimeout(playing);
		if(document.slideshow.play){
			document.slideshow.play.value="   Play   ";
		}
	}
	// if you have to change the image for the "playing" slide
	if(document.images.imgPlay){
		setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
		imgStop=document.images.imgPlay.src
	}
}

//###########################################
function PlayingSlide(num) {
	playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);
}

//###########################################
//desc: picks the transition to apply to the images
function GetTrans() {
	//si=document.slideshow.trans.selectedIndex;

		if((document.slideshow.trans && document.slideshow.trans.selectedIndex == 0) || (!document.slideshow.trans && dotrans==0)){
		dotrans=0;
	}
	else if ((document.slideshow.trans && document.slideshow.trans.selectedIndex == 1) || (!document.slideshow.trans && transtype == 'blendTrans')){
		dotrans=1;
		transtype='blendTrans';
		document.imgslide.style.filter = "blendTrans(duration=1,transition=1)";
	}else{
		dotrans=1;
		transtype='revealtrans';
		if(document.slideshow.trans) transattributes=document.slideshow.trans[document.slideshow.trans.selectedIndex].value;
		document.imgslide.style.filter = "revealTrans(duration=1,transition=" +transattributes+ ")";
	}

}
//###########################################
function preloadSlide() {
	for(k=0;k<theimage.length;k++) {
		theimage[k][0]=new Image().src=theimage[k][0];
	}
}

</script>

<!-- slide show HTML -->
<form name="slideshow">

<table border="1" cellpadding="2" cellspacing="0">
<tr>
	<td align="center">
	<a href="#" onmouseover="this.href=theimage[i][1];return false">
	<script type="text/javascript">
		document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
	</script>
	</a>
	</td>
</tr>
</table>

</form>
<!-- end of slide show HTML -->

এই কোডটিতে আমার তোলা কিছু ছবি দেওয়া আছে। আপনি আপনার পছন্দ মত ছবি এখানে দিতে পারবেন।
এক্ষেত্রে আপনাকে কোডটির কিছু অংশ এডিট করতে হবে । আসুন দেখি কি কি এডিট করতে হবে......
নিচের কোডটির একজায়গায় আছে দেখুন theimage[0]= এরপর “[.........]” (থার্ড ব্রাকেট ) এর মধ্যে আপনার ইমেজের লিঙ্ক দিতে হবে। এখানে “.........” এর মধ্যে আমার ইমেজের লিঙ্ক দেওয়া আছে। যেমন আমার স্লাইড শোর জন্য প্রথম ফ্রেমের ক্ষেত্রে http://a4.sphotos.ak.fbcdn.net/hphotos-ak-ash4/388269_286540138054060_100000942271618_849978_1347455580_n.jpg
এটি হলো প্রথম ইমেজের লিঙ্ক, এই লিঙ্কের বদলে আপনাকে আপনার পছন্দের ও কাক্ষিত যে ছবিটি দিতে চান তার লিঙ্ক দিতে হবে। এখানে আমি theimage[0], theimage[1], theimage[2], theimage[3], theimage[4] এভাবে পাঁচটি ইমেজের জন্য স্লাইড শোর লিঙ্ক দিয়েছে। আপনি চাইলে আরো বেশি ইমেজ দিতে পারেন। সেক্ষত্রে পরবর্তিটা হবে theimage[5]...... এভাবে চলতে থাকবে। পুরো ইমেজের লিঙ্কটা এরকম...
theimage[0]=["http://a4.sphotos.ak.fbcdn.net/hphotos-ak-ash4/388269_286540138054060_100000942271618_849978_1347455580_n.jpg", "", ""];
আশা করি এডিট করতে পেরেছেন। এবার এটাকে আপনার সাইটে দিতে হবে। এজন্য আপনি আপনার এডিটকৃত ঐ লিঙ্ককে কপি করে আপনার সাইটের Widgets>Embed Code

এরকম বক্স আসবে। এখানে পেস্ট করুন। ওকে করুন।

অবশেষে পাবলিশ করুন।

আশা করি সব কাজ ভাল মত করতে পারবেন। কোন সমস্যা হলে অবশ্যই বলবেন। আর ভাল লাগলে কমেন্ট করতে ভুলবেন না কিন্তু। সকলে ভাল থাকুন। সবার জন্য শুভ কামনা রইল। আল্লাহ হাফেজ।