Wednesday, 6 June 2012

Create Album Using Java Script with fade effect



Hi.................
This post will help you to make a picture album.Pictures of album will change during a second internal.
I have done this with the help of java script.
  • This post will create a static album in nature you can't add a new image at run time if you want to add or remove image you will have to change java script code.
  • Save your picture in a folder and rename all picture into 1 to increasing order e.g (1.jpg , 2. jpg ,3,jpg...)
  • Count no. of picture in your folder because I'll use this number in java script code block
  • I used a timer which will run continue you can not stop itHere is html code paste it in a notepad file save this file with htm or html extension in that folder which hold images..........
<html>
    <head>
        <title>Image Album :: Girfa</title>
        <script language=javascript>
            var i=0;
            function show()
            {
                i++;
                if(i==4)
                {
                    i=0;
                }
                else
                {
                    img1.src=i + ".jpg";
fadeImg(img1,50,false);
                }
                setTimeout("show()",3000);
            }
function fadeImg(el, val, fade)
{
if(fade === true)
{
val--;
}
else
{
val ++;
}

if(val > 0 && val < 100)
{
el.style.opacity = val / 100;
setTimeout(function(){fadeImg(el, val, fade);}, 10);
}
}

        </script>
    </head>
<body onLoad="show()">
    <img src=1.jpg height=300px width=400px style="border:solid grey 2px;padding:2px" id=img1 />  
</body>  
</html>

Download Full Source Code