Newbie needs help with additional slide show

[ludo]

1) Script Title: Blending Image Slide Show

2) Script URL (on DD):

3) Describe problem: I am using this script for one set of images successusfully. I have got it to work perfectly for one set of images.
Am I able to adapt it to effect another set of images on the same page in a different location, or do I need to use a different script.
Please could anyone help me with the correct scripting to do this.
This is the script for the header

<script language="JavaScript1.1">
<!--

//*****************************************
// Blending Image Slide Show Script-
// © Dynamic Drive (www.dynamicdrive.com)
// For full source code, visit http://www.dynamicdrive.com/
//*****************************************

//specify interval between slide (in mili seconds)
var slidespeed=3000

//specify images
var slideimages=new Array("image1.gif","image2.gif","image3.gif")

//specify corresponding links
var slidelinks=new Array("http://www.dynamicdrive.com","http://javascriptkit.com","http://www.geocities.com")

var newwindow=1 //open links in new window? 1=yes, 0=no

var imageholder=new Array()
var ie=document.all
for (i=0;i<slideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}

function gotoshow(){
if (newwindow)
window.open(slidelinks[whichlink])
else
window.location=slidelinks[whichlink]
}

//-->
</script>

and for the body

<a href="javascript:gotoshow()"><img src="image1.gif" name="slide" border=0 style="filter:blendTrans(duration=3)" width=97 height=100></a>

<script language="JavaScript1.1">
<!--

var whichlink=0
var whichimage=0
var blenddelay=(ie)? document.images.slide.filters[0].duration*1000 : 0
function slideit(){
if (!document.images) return
if (ie) document.images.slide.filters[0].apply()
document.images.slide.src=imageholder[whichimage].src
if (ie) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setTimeout("slideit()",slidespeed+blenddelay)
}
slideit()

//-->
</script>

<p align="center"><font face="arial" size="-2">This free script provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>
Thank you in anticipation.
Peter

[jscheuer1]

You need a different script:

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

[ludo]

John
Many thanks for getting back to me.
I thought that might be the case..I wonder if you might guide me with regard to how one would name or identify the separate slideshows.
Say I had 3 slide shows each with three images, named alpha,beta,omega.
this is the script for the header

<script type="text/javascript">

/***********************************************
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax

var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages2[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages2[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages2[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax

var fadebgcolor="white"

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

var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers

var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}

var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2

if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}


fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}

fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}


fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

</script>

I am not sure how to Configure the array "fadeimages[]" to reference the images you want to be displayed.

and the footer


<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")
new fadeshow(fadeimages2, 140, 225, 0, 3000, 0)

</script>
Do I paste this body text twice once in each location?
Sorry to sound so niave, but this is "rocket science" to me.
Again John, any assistance really appreciated.
Peter

t

[jscheuer1]

Replace:


var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax

var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages2[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages2[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages2[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax

with:


var alpha=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
alpha[0]=["photo1.jpg", "", ""] //plain image syntax
alpha[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
alpha[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax

var beta=new Array() //2nd array set example. Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
beta[0]=["photo4.jpg", "", ""] //plain image syntax
beta[1]=["photo5.jpg", "http://www.cssdrive.com", ""] //image with link syntax
beta[2]=["photo6.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax

var omega=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
omega[0]=["photo7.jpg", "", ""] //plain image syntax
omega[1]=["photo8.jpg", "http://www.cssdrive.com", ""] //image with link syntax
omega[2]=["photo9.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax


photo1.jpg - etc. are the names of the images that will be used. They should be in the same folder as your page.

In the body of the page, you may now have three separate scripts, one for each array:


<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(alpha, 140, 225, 0, 3000, 1, "R")
</script>

<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(beta, 140, 225, 0, 3000, 1, "R")
</script>

<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(omega, 140, 225, 0, 3000, 1, "R")
</script>

These may be placed in divisions or tables, as you see fit. Each one initializes and writes out one of your shows.

So basically whatever you named each array becomes the name it will be initialized with in the body.

You will not need:


<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")
new fadeshow(fadeimages2, 140, 225, 0, 3000, 0)

</script>

That's just the demo page example, and a little confusing because it initializes two slide shows - a lot of folks get tripped up on that.

[ludo]

John
Thanks for your help.
I am sure it will work.
I willgive it a try tomorrow (Tues) and get back to you to confirm.
Many thanks
Peter

[ludo]

Hi John
Works a treat.
Do you know if it is possible to have the images "morph or fade" into each other?
Thanks and greetings from Oxford UK
Peter

[jscheuer1]

They should be fading. If not, give a link to your page for trouble shooting purposes. Morphing is something else. You could use Winmorph (free):

http://www.debugmode.com/winmorph/

demos:

http://www.youtube.com/watch?v=qC_W00zpAGc&NR=1
http://www.youtube.com/watch?v=aAGYNrKFF6M&NR=1
http://www.youtube.com/watch?v=6nbiP_NuLKE&feature=related

But that generally results in something (a video or Flash) that won't work with a javascript slideshow. But you might be able to save enough frames as images to get a morphing effect with a slideshow.

[ludo]

Hi John
Perhaps a wrong choice of words.
Perhaps I have not set the delay/speed correct or need to change the slide speed settings. Is this possible it seems all too quick.
This is my script

<script type="text/javascript">

/***********************************************
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var outside=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
outside[0]=["outside.jpg", " ", ""] //plain image syntax
outside[1]=["outside-1-night.jpg", " ", ""] //image with link syntax
outside[2]=["outside-3.jpg", "http://www.javascriptkit.com", ""] //image with link and target syntax

var rions=new Array() //2nd array set example. Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
rions[0]=[" accueil-rions-2.jpg", "", ""] //plain image syntax
rions[1]=[" eglise-rions.gif", "", ""] //image with link syntax
rions[2]=[" accueil-rions-1.jpg", "", ""] //image with link and target syntax

var fadebgcolor="white"

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

var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers

var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}

var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2

if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter rogid XImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter rogid XImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}


fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}

fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}


fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

</script>
and


<script type="text/javascript">
new fadeshow(outside, 400, 300, 0, 3000, 1, "R")
</script>
Really appreciateyour time
Sorry to be a pain
Peter

[jscheuer1]

Your code looks OK, but I may have missed something. What browser are you using? You need to test the page in a browser, not in an editor or an editor's preview mode. If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

[ludo]

Hi John
Here is my page link (http://www.janitorman.net/rions/info)
What I want to do is slow down the speed of transition from one image to the next.
Also to have the speeds of each set of images being at a different pace.
and is it possible to have the images become tanslucent (or similar) during the changing process.
Hope this is more usefull to you.
Peter

[jscheuer1]

No, I meant link to the actual page.

[ludo]

John
I thought I had sent the correct page.
This is the page
http://www.janitorman.net/rions/info
Hope its helps

[jscheuer1]

That could be part of the problem, in most browsers that address renders as just code, not as an html page. I'll do some investigating, in the meantime try to give me an address to a page with a .htm or .html extension.

[jscheuer1]

OK, your page is not a valid HTML page, not even in quirks mode, and you did something to the main body of the script, this one is valid (in quirks mode) and restores the main body of the script:

http://home.comcast.net/~jscheuer1/side/ufade_3_h.htm

I took out your embedded sound, but you can probably add that back. Use your browser's view source to get the code of the above page. In order for most browsers to parse a page as HTML, its filename must end in .htm or .html, unless another server side extension that will be served as HTML is available.

[ludo]

OK, your page is not a valid HTML page, not even in quirks mode, and you did something to the main body of the script, this one is valid (in quirks mode) and restores the main body of the script:

http://home.comcast.net/~jscheuer1/side/ufade_3_h.htm

I took out your embedded sound, but you can probably add that back. Use your browser's view source to get the code of the above page. In order for most browsers to parse a page as HTML, its filename must end in .htm or .html, unless another server side extension that will be served as HTML is available.
Thanks John
I will add the sound back.
Appreciate your advices

[ludo]

Hi John
I have amended the page/renamed it/reinstated the sound .
Here it ishttp://www.janitorman.net/rions/info.htm
Hope you can access.
Now,
Could you show me how to slow down the picture transition speed to keep pace with the music.
I am sure you will see what I mean.
Thanks again
Peter

[jscheuer1]

Just to get a rough idea of how the slideshow works, try it without the sound. I think we need to find an alternative method for adding the sound to your page, as the current one raises security flags in IE, and appears to interfere with the fading transitions of the images in most browsers.

The good news is that at least now the page shows up in all browsers tested, whereas before it was displayed as raw code in all but IE.

One thing you might consider is, that if you want a slideshow that is coordinated with sound, the best route is a Flash object that presents both at once as a video clip. If you don't want to deal with that, we can probably roughly sync up the sound with the show, but as I say we need to find an alternative way of embedding the sound on the page.

[ludo]

Hi again John
Still plugging away with my website page.
Having read your posts in the forum I was wondering if your "swiss army knife" may be an option I might consider.
Having looked at it. Could I take out the buttons and descriptions, just having the images auto changing continuously.
If so could you show me from the default script what to change?


<style type="text/css">

/* All Styles Optional */

* {
font-family:arial;
font-size:10pt;
}
div#show3 {
background-color:#efefef;
width:140px;
margin:0 auto;
border:1px solid #444444;
}
div#show3 table td, div#show4 table td {
height:24px;
background-image:url('38.gif');
}
div#show4 table td {
background-image:url('40.gif');
}
div#show3 table input, div#show4 table input {
outline-style:none;
}
</style>

<!--[if IE]>
<style type="text/css">
div#show3 table td, div#show4 table td {
height:21px;
}
</style>
<![endif]-->

<script type="text/javascript">

//If using image buttons as controls, Set image buttons' image preload here true
//(use false for no preloading and for when using no image buttons as controls):
var preload_ctrl_images=true;

//And configure the image buttons' images here:
var previmg='left.gif';
var stopimg='stop.gif';
var playimg='play.gif';
var nextimg='right.gif';

var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides[0] = ["photo1.jpg", "Kissing Fools"];
slides[1] = ["photo2.jpg", "Seated Woman"];
slides[2] = ["photo3.jpg", "The Dog Lovers"];
slides[3] = ["photo4.jpg", "Standing Woman"];
slides[4] = ["photo5.jpg", "John, Mary and Jesus"];
//above slide show uses only the defaults

var slides2=[]; //SECOND SLIDESHOW
//configure the below images and descriptions to your own.
slides2[0] = ["photo6.jpg", "Crucifix"];
slides2[1] = ["photo7.jpg", "Alter Boys"];
slides2[2] = ["photo8.jpg", "Young Pan"];
slides2[3] = ["photo9_thumb.jpg", "Mona Lisa"];
//optional properties for these images:
slides2.desc_prefix='<b>Description:<\/b> '; //string prefix for image descriptions display
slides2.controls_top=1; //use for top controls
slides2.counter=1; //use to show image count
slides2.width=140; //use to set width of widest image if dimensions vary
slides2.height=225; //use to set height of tallest image if dimensions vary
slides2.no_auto=1; //use to make show completely user operated (no play button, starts in stopped mode)
slides2.use_alt=1; //use for descriptions as images alt attributes
slides2.use_title=1; //use for descriptions as images title attributes
slides2.nofade=1; //use for no fade-in, fade-out effect for this show
slides2.border=2; //set border width for images
slides2.border_color='lightblue'; //set border color for images

var slides3=[]; //THIRD SLIDESHOW
//configure the below images and descriptions to your own, note optional links, target and window specifications.
slides3[0] = ["1_side.jpg", "", "http://www.google.com", "_new", "top=250, left=300, width=500, height=300, location, resizable, scrollbars"];
slides3[1] = ["2_side.jpg", ""];
slides3[2] = ["3_side.jpg", "", "http://www.dynamicdrive.com"];
slides3[3] = ["5_side.jpg", "", "http://www.msn.com", "_new"];
//optional properties for these images:
slides3.no_descriptions=1; //use for no descriptions displayed
slides3.pause=1; //use for pause onmouseover
slides3.image_controls=1; //use images for controls
slides3.button_highlight='#cccccc'; //onmouseover background-color for image buttons (requires image_controls=1)
slides3.specs='width=300, height=250' //global specifications for this show's new window(s)
slides3.random=1; //set a random slide sequence on each page load
slides3.manual_start=1; //start show in manual mode (stopped)

//Notes:
//slides#.target will set a target for a slide group, will be overridden by slides#[#][3], if present
//slides#.specs will set new window specifications for a slide group, will be overridden by slides#[#][4], if present
//slides#.fadecolor will set fading images background color, defaults to white
//slides#.no_controls will set a slide show with no controls
//slides#.random will set a random slide sequence on each page load
//slides#.delay=3000 will set miliseconds delay between slides for a given show, may also be set in the call as the last parameter
//slides#.jumpto=1 will display added controls to jump to a particular image by its number
//slides#.no_added_linebreaks=1; use for no added line breaks in formatting of texts and controls

//use below to create a customized onclick event for linked images in a given show:
//slides#.onclick="window.open(this.href,this.target,'top=0, left=0, width='+screen.availWidth+', height='+screen.availHeight);return false;"

</script>

<script src="swissarmy.js" type="text/javascript">

/***********************************************
* Swiss Army Image slide show script - © John Davenport Scheuer: http://home.comcast.net/~jscheuer1/
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full original source code
***********************************************/

</script>



<p>
<script type="text/javascript">
//Notes on Parameters: The only required parameter is the slides_array_name. If Width is used, so must Height.
//Interval is optional too. It is always last, either fourth after Width and Height or second after Slides_array_name.
//Usage: new inter_slide(Slides_array_name, Width, Height, Interval)
new inter_slide(slides)
</script>
</p>


<p>
<script type="text/javascript">
new inter_slide(slides2)
</script>
</p>


<p>
<div id="show3"><script type="text/javascript">
new inter_slide(slides3)
</script>
</div>
</p>
Again your comments really appreciated.
Regards
Peter

[jscheuer1]

I doubt that will solve anything. IE will still have a security warning as regards your current method of embedding sound, and the Swiss Army slideshow uses a similar method of fading as does the Ultimate Fade In slideshow. But who knows, I guess there is a slim chance.

To answer your question anyway, to have one slideshow with no buttons or descriptors running continuously, first remove the styles, they are all optional. Use only one in page call, and only one array of images, set preload_ctrl_images=false; and remove the button images, use the properties as shown for the remaining array. So in the head:


<script type="text/javascript">

//If using image buttons as controls, Set image buttons' image preload here true
//(use false for no preloading and for when using no image buttons as controls):
var preload_ctrl_images=false;

var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides[0] = ["photo1.jpg", ""];
slides[1] = ["photo2.jpg", ""];
slides[2] = ["photo3.jpg", ""];
slides[3] = ["photo4.jpg", ""];
slides[4] = ["photo5.jpg", ""];
//optional properties for these images:
slides.no_controls = 1; // will set a slide show with no controls
slides.no_descriptions = 1; //use for no descriptions displayed
slides.no_added_linebreaks = 1; //use for no added line breaks in formatting of texts and controls

</script>

<script src="swissarmy.js" type="text/javascript">

/***********************************************
* Swiss Army Image slide show script - © John Davenport Scheuer: http://home.comcast.net/~jscheuer1/
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full original source code
***********************************************/

</script>

Then in the body:


<script type="text/javascript">
new inter_slide(slides);
</script>

[ludo]

John
I am sticking with the Ultimate fade in show
Now,what do i do to fade (slide) 1 image into the next, as oposed to the
instant image replacement.
Is this possible...
Thanks again
Peter

[jscheuer1]

I've just been playing with this a bit more and the sound can work, but the main problem appears to be, of all things, your copy of the Ultimate Fade In script has spaces removed from empty lines in the script. Ordinarily this shouldn't really matter, but apparently it does in this case.

Working demo with sound:

http://home.comcast.net/~jscheuer1/side/ufade_4_h.htm

I converted the wma to mp3, it's a little smaller, and has more support on the web.