Sunday, October 11, 2009

Create a simple Album using Java script

When ever I saw fancy picture albums in I always wonder how I can create a simple album using java script. Well when I learned javascript I found it quite simple. You need to know very basic CSS, JAVA script and a bit HTML. So lets learn how to make a very simple album using Java Script. We will learn it in steps.

  1. Create a file in folder. Name it to say 'Album'. Now Create a folder in it and name it say 'images'.
  2. Now create a text file and rename it to 'album.html'
  3. Now open album.html in you favorite text editor. I prefer using Nodepad++ . you can download it from http://sourceforge.net/projects/notepad-plus/files/
  4. Now we will write the code. First add html and head tag.
  5. Add a title tag. eg- <>Album< /title >
  6. Now before the < /head > you have to add the script required.
  7. Add the folllowing script. We will under stand the script in details later. -
< type="text/javascript">
var count=1; //counter
var IMG_NO=8; // set no of images
var imgUrl = new Array(); // image urls array

function init(){

// set image urls
imgUrl[1]="images/img1.jpg"; // your file name
imgUrl[2]="images/img2.jpg";
// and so on for all images ...

// call slideShow function
slideShow();
}

function slideShow() // function to show Images
{

var d=document.getElementById("img1");
d.src=imgUrl[count];
count++;
if(count > IMG_NO)
count=1;
// call the same function in 2 sec
setTimeout("slideShow()",2000);
}

< /script >


  • Now we have to make a area in the page to show image. So we will create a div and in side that we will have to write a <> tag with id='img1'.
  • ID is just like a unique name to a object in the web page. Using this you can access the that element using java script function document.getElementByID(' id');.
  • Note that in the javascript above we are calling the document.getElementByID(' img1'); .
  • In my example see how I have written inside body tag-
< onload="init()">

< class="div1">
< class="img1" id="img1">
< /div >

< /body >

  • I have defined a class if the div as "div1". and a class for the img as "img1".
< type="text/css">
body{
background:#CCCCCC;
}
.div1{
top:70px;
left:202px;
position:absolute;
height:400px;
width:600px;
background:#333333;
border-color:#00FFFF;
border-bottom-width:thick;
}
.img1{
top:5px;
left:5px;
position:absolute;
height:390px;
width:590px;
}

< /style >


6 comments:

  1. I am very much pleased with the topic you have chose for. I enjoyed every little bit part of it.
    Melbourne Web Developer

    ReplyDelete
  2. Replies
    1. This comment has been removed by the author.

      Delete
  3. This post is really nice and informative. The explanation given is really comprehensive and useful.

    sap fico training
    sap fico course

    ReplyDelete
  4. Many companies are pivoting to virtual events and More than 90% of event marketers plan to make virtual a key part of their strategy going forward. writing a bio for a conference and speakers bio examples

    ReplyDelete
  5. Avid Sibelius Ultimate 8.9.0 Crack lesluci ... mov playback, as well as the ability to manipulate media files (for example, to split up larger.mov files into .Sibelius 2022 Download

    ReplyDelete