ছোট কিছু কাস্টমাইজেশন এর মাধ্যমে আপনার ব্লগে যুক্ত পারেন একটি ফটো/ইমেজ গ্যালারি। ছোট হলেও আপনি এর সাথে অনেক কিছুই পাচ্ছেন। যা যা পাচ্ছেন এগুলো হলো- dimensions, play, pause, next এবং previous slide এবং অন্যান্য অপশন। ফটো/ইমেজ গ্যালারিটি যুক্ত করার জন্য আপনার ব্লগের Design>Edit HTML এ যান। এখানে একটি HTML/JavaScript গ্যাজেট নিন। গ্যাজেটের কোড লেখার অংশে নিচের কোড গুলো বসিয়ে দিন।
<style type=”text/css”>
#simplegallery1 {
//CSS for sample Gallery
position: relative;
visibility: hidden;
border: 5px solid black;
margin: auto;
}
#simplegallery1 .gallerydesctext {
//CSS for description DIV of Example 1 (if defined)
text-align: left;
padding: 2px 5px;
font-family: calibri;
}
</style>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>
<script type=”text/javascript” src=”http://latest-hacks.googlecode.com/svn/gadgets/Sliding Description Panel/imagegallery.js”>
</script>
<script type=”text/javascript”>
var mygallery=new simpleGallery({
wrapperid: “simplegallery1”, //ID of main gallery container,
dimensions: [400, 265], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
[“IMAGE LINK 1”, “#”, “_new”, “IMAGE DESCRIPTION”],
[“IMAGE LINK 2”, “#”, “_new”, “IMAGE DESCRIPTION”],
[“IMAGE LINK 3″,”#”, “_new”, “IMAGE DESCRIPTION”],
[“IMAGE LINK 4”, “#”, “_new”, “IMAGE DESCRIPTION”],
[“IMAGE LINK 5”, “#”, “_new”, “IMAGE DESCRIPTION”]
],
autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: true,
fadeduration: 1000, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//curslide: returns DOM reference to current slide’s DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
}
}
</script>
<div id=”simplegallery1″></div
কাস্টমাইজেশন –
কোডের মধ্যে অনেক জায়গায় IMAGE LINK নামে কিছু অপশন আছে এখানে আপনার ছবির ইউআরএল বসিয়ে দিন। আর IMAGE DESCRIPTION এর জায়গায় আপনার ছবি সম্পর্কে বর্ণনা দিন যা আপনার গ্যালারিতে দেখাবে। যেখানে # চিহ্ন আছে এখানে আপনি যেকোন ইউআরএল ব্যহার করতে পারেন। যদি আপনি ডাইমেনশন পরিবর্তন করতে চান তাহলে কোড গুলোর মধ্যে থেকে 400, 265 মান দুইটি পরিবর্তন করে দিন।
সবাইকে ধন্যবাদ।