...

View Full Version : Slide show transitions effect



jolene
06-28-2004, 01:01 PM
Hi,
I have this code which is ok for a slide show, but is there a way to modify it so that the transitions are gradual between photos? Or maybe a fade in/out effect? I *think* this code is free to use, but I'm not sure. I got it from: http://hotwired.lycos.com/webmonkey/03/18/index3a.html?tw=programming , but I replaced the photos with my own.
Here is the code:


<script language="JavaScript">
<!--
var interval = 2000;
var random_display = 0;
var image_dir = ""
var ImageNum = 0;
imageArray = new Array();
imageArray[ImageNum++] = new imageItem(image_dir + "john_1.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "john_2.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "john_5.jpg");

var number_of_image = imageArray.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function randNum(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
ImageNum = randNum(0, number_of_image-1);
}
else {
ImageNum = (ImageNum+1) % number_of_image;
}
var new_image = get_ImageItemLocation(imageArray[ImageNum]);
return(new_image);
}




function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";

timerID = setTimeout(recur_call, interval);
}




// -->
</script>
Thank you.

homerUK
06-28-2004, 01:27 PM
I'm not sure where to put the code - I'll have a look once I get back from work..... but you could use something like



strength = 100;
fade_frames = 6;
diff = strength / fade_frames;


for (x=0;x<fade_frames;x++)
{
document[place].filter = "alpha(opacity=strength)";
strength = strength - diff;
}


I think something like that'd work... basically you set the number of frames to fade by and work out the opacity...

you'd also need to do it the other way around to fade IN the other image....
I'll have a go at the code shortly...

jolene
06-28-2004, 03:09 PM
Great...I look forward to that,
Thanks

jolene
06-29-2004, 04:39 PM
oh...and ..do you know how to iknclude captions with each slide? It's so hard to find a good cross browser slide show....phew!
Thank you.

MindCrafter
06-30-2004, 01:47 AM
Below is a script form Dynamic Drive that works rather well in NS and IE the image swap will have a fade transition. In Opera or other browsers, the images are just swapped.

<script language="JavaScript1.2">
//Fade-in image slideshow- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

var slideshow_width='187px' //SET IMAGE WIDTH
var slideshow_height='134px' //SET IMAGE HEIGHT
var pause=4000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]="images/bannerimg/Image-1.jpg"
fadeimages[1]="images/bannerimg/Image-2.jpg"
fadeimages[2]="images/bannerimg/Image-3.jpg"

////NO need to edit beyond here/////////////

var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p]
}

var ie4=document.all
var dom=document.getElementById

if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(op acity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(op acity=10);-moz-opacity:10"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0]+'">')

var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1


function fadepic(){
if (curpos<100){
curpos+=10
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/100
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("fadepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curimageindex]
curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
}

function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/100
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)

</script>

Demo of Slide Show (http://www.mindcrafter.com/projects/Surrenaty_Web/template10/Template10a.htm)

This code will rotate layers on clisk and fade transition in NS and IE

function SetLayerDislplay(){
// Check to see if the the browser is IE 0r Netscape 6+ i.e Gecko
var isFilter = (((document.all) || (navigator.userAgent.indexOf('Gecko')!=-1))&&(navigator.userAgent.indexOf('Opera')==-1));
if(!isFilter){
if(navigator.userAgent.indexOf('Opera')!=-1){
for(i=0;i<aLayers.length;i++){
oLayer=document.all(aLayers[i])
oLayer.style.display='none';
}
document.all(aLayers[0]).style.display='';
}
}else{
RotateLayers(0);
}
}
var isDom = document.getElementById
var isIE = document.all
var isNS6 = (navigator.userAgent.indexOf('Gecko')!=-1)
var isNS4 = document.layers
var cOpacity=10
var cFadeOpacity=0
var nTimerDelay = 20
var oDisplayTimer
var oFadeTimer
var nDisplayedLayer=0
var nNewDisplayedLayer
function RotateLayers(Idx){
if (nDisplayedLayer!=Idx){
if (isDom&&navigator.userAgent.indexOf('Opera')==-1){
document.getElementById(aLayers[Idx]).style.display='';
FadeIn(Idx);
}else{
for(i=0;i<aLayers.length;i++){
if(navigator.userAgent.indexOf('Opera')!=-1){
oTarget=document.all(aLayers[i])
oTarget.style.display=(Idx==i?'':'none');
nDisplayedLayer=Idx
}
}
}
}
}
function FadeIn(Idx){
oTarget=document.getElementById(aLayers[Idx])
oTarget1=document.getElementById(aLayers[nDisplayedLayer])
cOpacity+=10
cFadeOpacity-=10
if (cOpacity<=100){
if (oTarget.filters){
oTarget.filters.alpha.opacity=Number(cOpacity);
oTarget1.filters.alpha.opacity=Number(cFadeOpacity);
oTarget.style.zIndex=4
oTarget1.style.zIndex=1
oDisplayTimer=setTimeout('FadeIn('+Idx+')',nTimerDelay);
}else if (oTarget.style.MozOpacity){
oTarget.style.MozOpacity=cOpacity/100
oTarget1.style.MozOpacity=cFadeOpacity/100
oDisplayTimer=setTimeout('FadeIn('+Idx+')',nTimerDelay);
}
}else{
clearInterval(oDisplayTimer)
cOpacity=10
cFadeOpacity=90
nDisplayedLayer=Idx
}
}


Place the onClick="RotateLayers(1);" call in the tag of the object you wish to use to scroll thru the layers



MindCrafter
www.mindcrafter.com



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum