Centered Text in Multi-Image Multi-Topic Slideshow

Micario · 08-15-2004, 07:56 PM

Hi my name is Mac. I have found a really good script for slideshows, here and would like to add Text to the slides. I use both IE6 and NS7.1, and have XP Pro as Win Version. I especially like it because it supports varied image sizes and centers everything. I am a novice when it comes to javascripts.

I will post the Script here and perhaps someone can help me! This is basically a dummy script as I will fill in the slideshows when it's working.

<html>
<body>

<center>

<table border="6" cellpadding="0" width="982" height="800" align="center"bgcolor="#F89900" cellspacing="0">
<p>

<a href="javascript:setslide(0)"<b>Start - Stop</b></a><br>
<a href="javascript:setslide(1)"<b>Acadia</b></a><br>
<a href="javascript:setslide(2)"<b>Oregon</b></a><br>
<a href="javascript:setslide(3)"<b>California</b></a></p><br>

<tr>
<td valign="center" align="center">

<script language="JavaScript1.2">

/*Multi image slideshow script- by javascriptkit.com
Visit JavaScript Kit (http://javascriptkit.com) for script
Credit must stay intact for use*/

//#1 SPECIFY number of slideshows
var number_of_slideshows=4

//#2 SPECIFY interval between slide (2000=2 seconds)
var interval=5000

//#3 SHOULD each slide be linked to a unique URL?
var linked=1

var slidewidth='768px'
var slideheight='512px'

var slideshows=new Array(number_of_slideshows)
for (i=0; i <number_of_slideshows; i++)
slideshows[i]=new Array()

//#4 SPECIFY image paths of 1st slideshow
slideshows[0][0]='http://www.geocities.com/barriewadman@sbcglobal.net/centview.gif'

//SPECIFY image paths of 2nd slideshow (remove if number_of_slides less than 2)
slideshows[1][0]='http://www.arcatapet.net/image/dyh01.jpg'
slideshows[1][1]='http://www.serve.com/wizjd/pics/yosm01_m.jpg'
slideshows[1][2]='http://www.serve.com/wizjd/parks/photo/mediumSize/Arches01.jpg'

//SPECIFY image paths of 3rd slideshow (remove if number_of_slides less than 3)
slideshows[2][0]='http://www.serve.com/wizjd/pics/gbas01_m.jpg'
slideshows[2][1]='http://www.serve.com/wizjd/pics/gtet01_m.jpg'
slideshows[2][2]='http://www.serve.com/wizjd/pics/gtet04_m.jpg'

slideshows[3][0]='http://www.jdonohue.com/parks/photo/mediumSize/Acadia01.jpg'
slideshows[3][1]='http://www.serve.com/wizjd/pics/yosm02_m.jpg'
slideshows[3][2]='http://www.serve.com/wizjd/parks/photo/mediumSize/Arches01.jpg'

//EXTEND THIS ARRAY if more than 3 slide shows



var slidelinks=new Array(number_of_slideshows)
for (i=0; i <number_of_slideshows; i++)
slidelinks[i]=new Array()

//#5 SPECIFY urls of 1st slideshow
slidelinks[0][0]='http://mysite.com/car1.htm'
slidelinks[0][1]='http://mysite.com/car2.htm'
slidelinks[0][2]='http://mysite.com/car3.htm'

//SPECIFY urls of 2nd slideshow (remove if number_of_slides=1)
slidelinks[1][0]='http://mysite.com/house1.htm'
slidelinks[1][1]='http://mysite.com/house2.htm'
slidelinks[1][2]='http://mysite.com/house3.htm'

//SPECIFY urls of 3rd slideshow (remove if number_of_slides less than 3)
slidelinks[2][0]='http://mysite.com/boat1.htm'
slidelinks[2][1]='http://mysite.com/boat2.htm'
slidelinks[2][2]='http://mysite.com/boat3.htm'

function clickredir(){
window.location=slidelinks[maininc][subinc]
}



var maininc=0
var subinc=0

if (linked)
document.write('<a href="javascript:clickredir()"><img src="'+slideshows[0][0]+'" name="multislide" border=4></a>')
else
document.write('<img src="'+slideshows[0][0]+'" name="multislide">')

function slideit(){
subinc= (subinc<slideshows[maininc].length-1)? subinc+1: 0
document.images.multislide.src=slideshows[maininc][subinc]
}

function setslide(which){
clearInterval(runit)
maininc=which
subinc=0
runit=setInterval("slideit()",interval)
}

runit=setInterval("slideit()",interval)

</script>

</td><//tr></table>
</center>
</body>
</html>

Hope Someone Can help
Micario - Mac

Vladdy · 08-15-2004, 08:28 PM

Separation of content, presentation and functionality is the key to achieving your goals:
www.klproductions.com/klslideshow.html

Micario · 08-16-2004, 12:30 AM

Hi my name is Mac. I have found a really good script for slideshows, here and would like to add Text to the slides. I use both IE6 and NS7.1, and have XP Pro as Win Version. I especially like it because it supports varied image sizes and centers everything. I am a novice when it comes to javascripts.

I will post the Script here and perhaps someone can help me! This is basically a dummy script as I will fill in the slideshows when it's working.

<html>
<body>

<center>

<table border="6" cellpadding="0" width="982" height="800" align="center"bgcolor="#F89900" cellspacing="0">
<p>

<a href="javascript:setslide(0)"<b>Start - Stop</b></a><br>
<a href="javascript:setslide(1)"<b>Acadia</b></a><br>
<a href="javascript:setslide(2)"<b>Oregon</b></a><br>
<a href="javascript:setslide(3)"<b>California</b></a></p><br>

<tr>
<td valign="center" align="center">

<script language="JavaScript1.2">

/*Multi image slideshow script- by javascriptkit.com
Visit JavaScript Kit (http://javascriptkit.com) for script
Credit must stay intact for use*/

//#1 SPECIFY number of slideshows
var number_of_slideshows=4

//#2 SPECIFY interval between slide (2000=2 seconds)
var interval=5000

//#3 SHOULD each slide be linked to a unique URL?
var linked=1

var slidewidth='768px'
var slideheight='512px'

var slideshows=new Array(number_of_slideshows)
for (i=0; i <number_of_slideshows; i++)
slideshows[i]=new Array()

//#4 SPECIFY image paths of 1st slideshow
slideshows[0][0]='http://www.geocities.com/barriewadman@sbcglobal.net/centview.gif'

//SPECIFY image paths of 2nd slideshow (remove if number_of_slides less than 2)
slideshows[1][0]='http://www.arcatapet.net/image/dyh01.jpg'
slideshows[1][1]='http://www.serve.com/wizjd/pics/yosm01_m.jpg'
slideshows[1][2]='http://www.serve.com/wizjd/parks/photo/mediumSize/Arches01.jpg'

//SPECIFY image paths of 3rd slideshow (remove if number_of_slides less than 3)
slideshows[2][0]='http://www.serve.com/wizjd/pics/gbas01_m.jpg'
slideshows[2][1]='http://www.serve.com/wizjd/pics/gtet01_m.jpg'
slideshows[2][2]='http://www.serve.com/wizjd/pics/gtet04_m.jpg'

slideshows[3][0]='http://www.jdonohue.com/parks/photo/mediumSize/Acadia01.jpg'
slideshows[3][1]='http://www.serve.com/wizjd/pics/yosm02_m.jpg'
slideshows[3][2]='http://www.serve.com/wizjd/parks/photo/mediumSize/Arches01.jpg'

//EXTEND THIS ARRAY if more than 3 slide shows



var slidelinks=new Array(number_of_slideshows)
for (i=0; i <number_of_slideshows; i++)
slidelinks[i]=new Array()

//#5 SPECIFY urls of 1st slideshow
slidelinks[0][0]='http://mysite.com/car1.htm'
slidelinks[0][1]='http://mysite.com/car2.htm'
slidelinks[0][2]='http://mysite.com/car3.htm'

//SPECIFY urls of 2nd slideshow (remove if number_of_slides=1)
slidelinks[1][0]='http://mysite.com/house1.htm'
slidelinks[1][1]='http://mysite.com/house2.htm'
slidelinks[1][2]='http://mysite.com/house3.htm'

//SPECIFY urls of 3rd slideshow (remove if number_of_slides less than 3)
slidelinks[2][0]='http://mysite.com/boat1.htm'
slidelinks[2][1]='http://mysite.com/boat2.htm'
slidelinks[2][2]='http://mysite.com/boat3.htm'

function clickredir(){
window.location=slidelinks[maininc][subinc]
}



var maininc=0
var subinc=0

if (linked)
document.write('<a href="javascript:clickredir()"><img src="'+slideshows[0][0]+'" name="multislide" border=4></a>')
else
document.write('<img src="'+slideshows[0][0]+'" name="multislide">')

function slideit(){
subinc= (subinc<slideshows[maininc].length-1)? subinc+1: 0
document.images.multislide.src=slideshows[maininc][subinc]
}

function setslide(which){
clearInterval(runit)
maininc=which
subinc=0
runit=setInterval("slideit()",interval)
}

runit=setInterval("slideit()",interval)

</script>

</td><//tr></table>
</center>
</body>
</html>

Hope Someone Can help
Micario - Mac

Willy Duitt · 08-16-2004, 03:39 AM

Quote:

Originally Posted by Micario

Please Help with Centered Text Added to the javascript I am using

Does the reposting of your script mean that you are not willing to consider alternative scripts which may already have the functionality you are looking for?

If you are insisting on only using the script that you posted, I can only suggst that you attempt to make the necassary changes yourself and when/if you run into problems, post your codes and seek further direction....

But I agree with Vladdy and I also have numerous slides shows with the functionality that you desire but if you are stuck on that script....

.....Willy

Micario · 08-16-2004, 04:03 PM

Thanks for the reply Vlady and Willy.

I checked your page Vlady, and it looks like a good program, however I didn't see a capability for multiple slideshows, although it probably has that function.

I am not locked into this script and in fact am looking at several, none of which do everything I want. And I am learning to write javascript routines, although at my age it's slow going.

I have also been around computers and the net long enough to know that I can do most things for free if I'm willing to look. I will continue to look as my experience with these forums, is someone has usually done what I'm trying to do.

I offer my help to those that ask if I can, and shoes seem to fit on my foot also.

That isn't to say that I won't invest in modules and/or programs because at times I of course do. However in this case, by subscribing to several forums and experimenting with the free routines I find I should eventually solve my problems. I don't intend to invent the wheel, but there are a lot of wheels out there. If I can't find one I'll be back as our gov Arnold says.

I am writing a series of pages for a subscription service for travelers on the road and slideshows are a very small part of that. I also intend for folks to be able to enter and view there own slideshows, so that they can share their trips with each other, while maintaining audio-visual chat. So in the meantime I'm writing scripts in several languages and my web pages will eventually be a total program.

Again thanks for your input and I will keep your programs in mind.

Again I am trying to write Multi-Slideshows, with Multi Variable size centered images that I can have a maxheight/maxwidth and centered text above or below the image. Also the images will be taken from the web rather than stored, with reference and permission to the sites they are taken from. So that I do not have to store or modify the images. They will also display in a table or frame on the initial page rather than a new one.

Note: I also test all my pages with IE, NS, Opera and Firefox the latest versions thereof. I have tested a routine that has various change effects that work in all browsers except in NS the effects do not display. However in that script I cannot center within the table or frame.

Also keep in mind that my folks will be having an audio-chat using the control key for input, while viewing the slides, so that the slides are-preloaded and do not slow down the chat which is on another page.

Mac

Vladdy · 08-16-2004, 11:13 PM

Quote:

Originally Posted by Micario

<snip />

I checked your page Vlady, and it looks like a good program, however I didn't see a capability for multiple slideshows, although it probably has that function.
<snip />

I guess you have not paid much attention. Slide 4 on that page states that ability to have multiple slideshows is one of the advantages of OOP design and demonstrates a second nested slideshow.

robsta · 08-21-2004, 05:52 AM

Hi Mac,

If you're willing to use CSS-P for the page layout and a different script to run the slideshow, this might be a solution. You can adjust the timing for each *screen*. You can also layer new <div>'s over each of the screens and add your text - there might be an inner html script out there you can modify so that the text changes with each image change. Otherwise, you can add the text directly to the images using Photoshop or any other image editing software. Or create the text as separate images and run them on additional screens.

Hope this helps!
robsta

Here's the code if you want to give this a try »

Code:

<html>
<head>
<meta name="linked-style-sheet-name" content="Embedded style sheet">
<meta name="window-location" content="{ 45 -5 556 792 }">
<meta name="targetted-browsers" content="NS4.0 NS6 IE4.0 IE5">
<title>MultiWindowSlideshow - Test</title>
<style type="text/css">
body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 760 px;
margin: 0 auto;
background-color: #deddbf; }

#pic1 { position: absolute;
top: 50px;
left: 45px;
width: 222px;
height: 149px;
z-index: 2; }

#pic2 { position: absolute;
top: 50px;
left: 269px;
width: 222px;
height: 149px;
z-index: 3; }

#pic3 { position: absolute;
top: 50px;
left: 494px;
width: 222px;
height: 149px;
z-index: 4; }

#frame { position: absolute;
top: 24px;
left: 19px;
width: 723px;
height: 201px;
z-index: 1;
background-color: #000000; }
</style>

<script language="JavaScript">
<!-- Original: CodeLifter.com (support@codelifter.com) -->
<!-- Web Site: http://www.codelifter.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- This is a MODIFIED VERSION (with due respect to the author) -->
<!-- Made it Object-Oriented to run multiple slideshows -->

<!-- Begin

function SlideShow(imgName,speed,duration){	
	var p; //length of Pic array
	var j = 0;		
	var slide = imgName;
	// Set slideShowSpeed (milliseconds)
	var slideShowSpeed = speed;
	// Duration of crossfade (seconds)
	var crossFadeDuration = duration;
	var Pic = new Array();
	this.timer = null;
	this.setPics = function(){
		var preLoad = new Array();
		//set pics and preload
		for (var i=0;i<arguments.length;i++){
			Pic[i] = arguments[i];
			preLoad[i] = new Image();
			preLoad[i].src = Pic[i];
		}
		p = Pic.length;
	}
	this.runSlideShow = function(varName){
		var t;
		if (document.all) {
			document.images[slide].style.filter="blendTrans(duration=3)";
			document.images[slide].style.filter="blendTrans(duration=crossFadeDuration)";
			document.images[slide].filters.blendTrans.Apply();
		}
		document.images[slide].src = Pic[j];
		if (document.all) {
			document.images[slide].filters.blendTrans.Play();
		}
		j = j + 1;
		if (j > (p - 1)) j = 0;
		this.timer = setTimeout(varName+".runSlideShow('"+varName+"')", slideShowSpeed);
		
	}
	this.stopSlideShow = function(){
		if (this.timer) clearTimeout(this.timer);
	}
}
//end script

//sample usage
var slide1 = new SlideShow('SlideShow1',2000,30);
slide1.setPics("imgs/slideblank.jpg","imgs/image1.jpg","imgs/image1.jpg","imgs/image1.jpg","imgs/image1.jpg","imgs/slideblank.jpg","imgs/slideblank.jpg","imgs/slideblank.jpg","imgs/slideblank.jpg","imgs/text3.jpg","imgs/text3.jpg","imgs/slideblank.jpg","imgs/slideblank.jpg");

var slide2 = new SlideShow('SlideShow2',2000,30);
slide2.setPics("imgs/slideblank.jpg","imgs/slideblank.jpg","imgs/image2.jpg","imgs/image2.jpg","imgs/slideblank.jpg","imgs/slideblank.jpg","imgs/slideblank.jpg","imgs/text2.jpg","imgs/text2.jpg","imgs/text2.jpg","imgs/image2.jpg","imgs/image2.jpg","imgs/image2.jpg");

var slide3 = new SlideShow('SlideShow3',2000,30);
slide3.setPics("imgs/slideblank.jpg","imgs/slideblank.jpg","imgs/slideblank.jpg","imgs/image3.jpg","imgs/image3.jpg","imgs/image3.jpg","imgs/slideblank.jpg","imgs/slideblank.jpg","imgs/text3.jpg","imgs/text3.jpg","imgs/text3.jpg","imgs/text3.jpg","imgs/slideblank.jpg");

//if you want to start slideshows onload
/*window.onload = function(){
	slide1.runSlideShow('slide1');
	slide2.runSlideShow('slide2');
	slide3.runSlideShow('slide3');
}*/

// End -->
</script>

</head>
<body onLoad="slide1.runSlideShow('slide1');slide2.runSlideShow('slide2');slide3.runSlideShow('slide3')">
<div style="position: absolute; left:50%; width: 760px; height: 390px; margin-left:-380px;">

<div id="frame"></div>

<div id="pic1"><img name="SlideShow1" src="imgs/slideblank.jpg" width="222" height="149"></div>

<div id="pic2"><img name="SlideShow2" src="imgs/slideblank.jpg" width="222" height="149"></div>

<div id="pic3"><img name="SlideShow3" src="imgs/slideblank.jpg" width="222" height="149"></div>

</div>
</body>
</html>

Micario · 08-21-2004, 03:29 PM

I am pretty much a novice as to javascript & CSS. I am going to play with the script to see what it can do. I'm using photos off the web so don't want to edit them.

I just want to add a centered text description and limit the height-width of the image so as to fit in a table

I'm in Northern Cal but spent much time in Washington, specifically the Olympic Peninsula and Just East of Lake Washington. I was reading your profile.

I will email you a couple of my pages so you can see what I'm trying to do

Travelin Mac