Image toggle for slideshow

[medway808]

Hi,

I have a js slideshow and need the 'play' button image to toggle back and forth from 'play' to a 'stop' image. I found a second js script that toggled the image but when applied the slideshow will no longer work in IE, only FF. I believe the issue is to do with an id name conflict.

If anyone can either find a work around with my current two scripts or suggest a way to add to the slideshow script so that it can handle both it would be very much appreciated.


Toggle code:

</script>

This is the image toggle script:

<script type = 'text/javascript'>
function changePic(el, pic1, pic2) {
var pic=((el.src.match(pic1)!=null)? pic2 : pic1);
el.src="images/"+pic+".gif";
}
window.onload=function() {
var pic=document.getElementById('toggle');
pic.onclick=function(){changePic(this,'play','next');}
}
</script>

Part of slideshow code I believe is conflicting:

<script language="javascript">

document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')

</script>

HTML


<div style="margin-top:5px""><a href="#" onFocus="this.blur()"onclick="SetSlide(i-1);"><img src="images/prev.gif" width="19" height="18"></a>


<a href="#" onFocus="this.blur()"onclick="PlaySlide();"><img id="toggle" src="images/next.gif" width="23" height="18"></a>



<a href="#" onFocus="this.blur()"onclick="SetSlide(i+1);"><img src="images/next.gif" width="19" height="18"></a></div>


I have a feeling the document.write with includes and id="imgslide" (the slideshow script) is interfering with:

var pic=document.getElementById('toggle');

of the toggle script.

 

[trollacious]

Much of your code is missing, either from your post or from your page. Below is a link for a slideshow I've been using a LONG time and have recommended many times. It has the capability to be automatic (and that can be turned off and on), or that functionality can be easily removed.

http://nancyandlee.tripod.com

Lee

 

[medway808]

Lee,

Hi here is the rest of the code:


The slideshow works on it's own, the issue is when I add the second script to toggle the .gif image I'm using for the play/pause button. In FF it's fine, in IE the slideshow fails to work.

<script language="JavaScript">

theimage = new Array();



theimage[0]=["images/1302700_fllg.jpg",];

theimage[1]=["images/1302701_fllg.jpg",];

theimage[2]=["images/1302702_fllg.jpg",];

theimage[3]=["images/1302703_fllg.jpg",];

theimage[4]=["images/1302704_fllg.jpg",];

theimage[5]=["images/1302705_fllg.jpg",];

theimage[6]=["images/1302706_fllg.jpg",];

theimage[7]=["images/1302707_fllg.jpg",];

///// Plugin variables



playspeed=3000;// The playspeed determines the delay for the "Play" button in ms

linksperline=0; // For the text links

playdiffernce=500; // The speed that the autoplay speed is changed by. 1000=1sec



dotrans=1; // if value = 1 then there are transitions played in IE

transtype='blendTrans';// 'blendTrans' or 'revealtrans'

transattributes='23';// duration=seconds,transition=#<24

//#####

//key that holds where in the array currently are

i=0;


//###########################################

window.onload=function(){



	//preload images into browser

	preloadSlide();



	//set transitions

	GetTrans();



	//set the first slide

	SetSlide(0);



}


// Preloader

function preloadSlide() {for(k=0;k<til;k++) {theimage[k][1]=new Image().src=theimage[k][1];}}


//###########################################

function SetSlide(num) {

	//too big

	i=num%theimage.length;

	//too small

	if(i<0)i=theimage.length-1;



	//switch the image

	if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Apply()')

	document.images.imgslide.src=theimage[i][0];

	if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Play()')


	//if they want name of current slide

	document.getElementById('slidebox').innerHTML=theimage[i][2];


}


//###########################################

function PlaySlide() {

	if (!window.playing) {

		PlayingSlide(i+1);

		if(document.slideshow.play){

			document.slideshow.play.value="   Stop   ";

		}

	}

	else {

		playing=clearTimeout(playing);

		if(document.slideshow.play){

			document.slideshow.play.value="   Play   ";

		}

	}

	// if you have to change the image for the "playing" slide

	if(document.images.imgPlay){

		setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);

		imgStop=document.images.imgPlay.src

	}

}





//###########################################

function PlayingSlide(num) {

	playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);

}

//###########################################

//desc: picks the transition to apply to the images

function GetTrans() {

	//si=document.slideshow.trans.selectedIndex;

		if((document.slideshow.trans && document.slideshow.trans.selectedIndex == 0) || (!document.slideshow.trans && dotrans==0)){

		dotrans=0;

	}

	else if ((document.slideshow.trans && document.slideshow.trans.selectedIndex == 1) || (!document.slideshow.trans && transtype == 'blendTrans')){

		dotrans=1;

		transtype='blendTrans';

		document.imgslide.style.filter = "blendTrans(duration=1,transition=1)";

	}else{

		dotrans=1;

		transtype='revealtrans';

		if(document.slideshow.trans) transattributes=document.slideshow.trans[document.slideshow.trans.selectedIndex].value;

		document.imgslide.style.filter = "revealTrans(duration=1,transition=" +transattributes+ ")";

	}

}

//###########################################

function preloadSlide() {

	for(k=0;k<theimage.length;k++) {

		theimage[k][0]=new Image().src=theimage[k][0];

	}

}

</script>

 

[trollacious]

I don't mess with any code that uses document.all and eval. Typically that code is either poorly written or outdated, or both. document.all is IE only, and eval is a sloppy way to accomplish things (eval = evil). It'd take time to clean your code up to make it work consistently, where the stuff I gave you would easily modifiable.

Lee

 

[medway808]

Ok thanks for the info.

I found that by taking this line out of the first bit of code I posted:

window.onload=function()

Makes IE work again, although then the toggle script doesnt work anymore.

I also see the slideshow script itself also has a:

window.onload=function()

Perhaps that's the conflict.

Sorry very new to javascript so perhaps these are obvious yes/no questions.

 

[trollacious]

If you want to use the code you've been posting, you'd benefit greatly from some of the online tutorials for beginners. As the logo in the upper left corner of the page says, Tek-Tips is "INTELLIGENT WORK FORUMS FOR COMPUTER PROFESSIONALS" and not really aimed at providing tutorial assistance.

Lee

 

[medway808]

Lee,

Thanks, fair enough, I think I've found some info that can help as well.

Jesse

 

[medway808]

Resolved this by combining the windown.onload function of the second script into the first.