Posts Tagged ‘Javascript functions’

Cool Javascript|slideshow function|rotator function part2

June 20, 2008 - 1:09 pm No Comments

This is a second method for the slideshow function | rotator function.
The difference about this one is that the image fades more smoothly.

A. To put in the header:

1. the javscript page

B. To put in the body:

The slideshow

<script src=”js/ja.header.js” type=”text/javascript”></script>
<script type=”text/javascript”>var fadetime = “3000″;</script>
<div id=”ja_header_jsfade” >
<img src=”images/img_1.jpg” alt=”Arch-Idee” width=”327″ height=”535″ style=”position: absolute; top: auto; left: auto; float:right; display: ‘none’;” />
<img src=”images/img_2.jpg” alt=”Arch-Idee” width=”327″ height=”535″ style=”position: absolute; top: auto; left: auto; float:right; display: ‘none’;” />
<img src=”images/img_3.jpg” alt=” Arch-Idee” width=”327″ height=”535″ style=”position: absolute; top: auto; left: auto; float:right; display: ‘none’;” />
<img src=”images/img_4.jpg” alt=”Arch-Idee” width=”327″ height=”535″ style=”position: absolute; top: auto; left: auto; float:right; display: ‘none’;” />

C. The JS page:

1. ja.header.js

/*
Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
*/

window.addEventListener?window.addEventListener(’load’,so_init,false):window.attachEvent(’onload’,so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false, div;
var fadetime = 3000;
function so_init()
{
if(!d.getElementById || !d.createElement)return;

imgs = d.getElementById(’ja_header_jsfade’).getElementsByTagName(’img’);
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = ‘block’;
imgs[0].xOpacity = .99;

setTimeout(so_xfade,fadetime);
}

function so_xfade()
{
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;

cOpacity-=.05;
nOpacity+=.05;

imgs[nIndex].style.display = ‘block’;
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;

setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);

if(cOpacity<=0)
{
imgs[current].style.display = ‘none’;
current = nIndex;
setTimeout(so_xfade,fadetime);
}
else
{
setTimeout(so_xfade,50);
}

function setOpacity(obj)
{
if(obj.xOpacity>.99)
{
obj.xOpacity = .99;
return;
}

obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = ‘alpha(opacity=’ + (obj.xOpacity*100) + ‘)’;
}
}

Tags:   Posted in Webpage |

Cool Javascript|slideshow function|rotator funtion

June 20, 2008 - 10:15 am No Comments

This function is compatible with any web extension. Html, AsP, PHP, etc….
It’s cool and easy to manipulate, this way you don’t need any flash animation or  gif images. Just normal slideshow for banner rotator or photo album slideshow.

1. What to put in the <head>:
<script type=”text/javascript”>
var imgs1 = new Array(”images/banner1.jpg”,”images/banner2.jpg”,”images/banner3.jpg”); <!–images–>
var lnks1 = new Array(”index.asp”,”index.asp”,”index.asp”);
var alt1 = new Array(”MVS - BVBA”,”MVS - BVBA”,”MVS - BVBA”);
var currentAd1 = 0;
var imgCt1 = 3; <!– the total images that will be use–>
function cycle1() {
if (currentAd1 == imgCt1) {
currentAd1 = 0;
}
var banner1 = document.getElementById(’adBanner1′);
var link1 = document.getElementById(’adLink1′);
banner1.src=imgs1[currentAd1]
banner1.alt=alt1[currentAd1]
document.getElementById(’adLink1′).href=lnks1[currentAd1]
currentAd1++;
}
window.setInterval(”cycle1()”,3000); <!– the time interval = the time limit between the images–>

</script>

</head>

2. What to put in the <body>:

<tr>
<td align=”left” valign=”top”><a href=”"urllink1“” id=”adLink1” target=”_top”><img src=”images/banner1.jpg“  alt=”MVS - BVBA” width=”780″ height=”329″ “id=”adBanner1” border=”0″/></a></td>
</tr>

</body>

Well done - with this easy function you can rotate any banner or header images how many and how long you want to display on your website.

— Groeten, Rofaldez —

Tags:   Posted in Webpage |