Awesome! টিউনস
সকল Awesome! টিউনস

সবচেয়ে সহজ পদ্ধতিতে ওয়েবসাইট [পর্ব-০৬] :: আপনার সাইটে স্লাইড শো যোগ করুন

4,251 দেখা 6 টিউমেন্টস জোসস
টিউন বিভাগ ওয়েব ডেভেলপমেন্ট
প্রকাশিত
Level 0

28 টিউনস 258 টিউমেন্টস 1 ফলোয়ার

সবচেয়ে সহজ পদ্ধতিতে ওয়েবসাইট

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!-- 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


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

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

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

Level 0

আমি রাজিব আহসান। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 14 বছর 1 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 28 টি টিউন ও 258 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

বগুড়ার একমাত্র বানান ভূল সর্বস্ব লেখক

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস

Level 0

দারুন লাগলো এখন try করে দেখি পারি কি না।

Level 0

thanks

Level 3

অসাধারণ টিউন আর সমস্যা হলে আপনাকে ফোন দিবো।টিটির অবস্থার কারণে কমেন্ট করতে পারিনি।আপনার কারনে আজ একটি সাইট করতে পেরেছি এ জন্য এবং এই নিয়মিত টিউনের জন্য অসংখ্য অসংখ্য ধন্যবাদ।

Level 0

fvBqv,¯­vBo †kv Uv n‡”Q bv.wK Kwi

Level 0

দারুন ভাইয়া ,