Ultimate Fade-In Slide Show "HORIZONTAL."

[gpechauer]

1) Script Title: Ultimate fade-slide show

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem:

Script works great. My question:

1. I want to have 5 slide shows with 3 alternating images for each (total images of 15) in a horizontal format. I'm using .css with .divs (not tables). When I add each one (in one .div) they stack vertically with the .div set to .px width large enough to allow the 5-shows to run next to each other.

2. Another script "Mutiframe Slide Show" has how to specify vertical "<br>" or "" for horizontal See below. Can't find something similar in "Ultimate Fade In" script.

//Specify code to insert between each slide (ie: "<br>" to insert a line break and create a vertical layout)
//"" for none (or horizontal):
var slideseparater="<br>"[/color]

Thanks!
Greg

[tonyking]

Little unsure of what you are saying in the end there, but if I understand you correctly you want this:

___________________________
SS1 SS2 SS3 SS4 SS5
___________________________

But the way you coded the page, you get this:

____
SS1
SS2
SS3
SS4
SS5
____

If that's the case then the error is either in the way you call the multiple scripts, or in the format of the division you placed them in. I would create 5 separate divisions on my page with the attribute "float:left;", and set to a few pixels wider, and taller than my largest image.

Then I would place each instance of a slideshow in a separate div with the same attributes listed above.

it could all be done in one division however, just try adding "float:left;" in the .css and see if that corrects the problem.

[gpechauer]

Hi Tony,

Thanks so much for the reply. I'm probably not using the script correctly. Do I put the "script" in each .div? Do I have to change the name for each array and if I do, what would be the code for each slide show? Each show is the same size (height and width).

The last part I included is a different script that allows one to tell it to go horizontally or vertical. If I add "<br>" it creates a break and each one drops down on the next line. If I don't use the the "br" and just leave it blank between the quotes, it lines up each show to the right. This is just a different script that does the same, but no fade in the slide shows.

Thanks!
Greg

[tonyking]

You configure each slideshow in the head section of your webpage within this 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 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/////////////

In the above code theres 2 slideshows, fadeimages, and fadeimages2. You can add as many as you want following the same format, and each one is configured seprately.


This is the code you would put in each div:

<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")
 </script>

Now in the next division you would have to change it to:

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

Notice that fadeshow, has changed to fadeshow2. Whatever you configure in the head portion of this script, you may call in the body with this same script, and chang the number behind fadeshow accordingly to match.

Hope this helps you, do you have a link to the page you're applying this script to? I could be a lot more help if you did.

[gpechauer]

I lined up the five pics horizontally using the same code for each (see below). Of course, they are all of the same three pics. I tried to changing the second pic series, but all I get is an empty area. I put a blue background in a surround .div. Each "slide show" is in it's own div.


Thanks!

Greg


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="The history of Vassarette, over 100 years of fashionable, trend right intimates for the lingerie enthusiast." />
<meta name="keywords" content="lingerie, bra, bras, cleavage, intimate, intimates, sexy, push-up, seductive, curves, feminine, edgy, crazy in love, luxurious, gorgeous, european inspired, sexier" />
<title>Vassarette Where To Buy</title>
<link href="css/vass_global.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 6]>
<link href="css/vass_global_ie5.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script type="text/javascript">


var fadeImages = new Array();


//SET IMAGE PATHS. Extend or contract array as needed
fadeImages[0]=["images/thumbs_01.png", "http://www.fruit.com", "_blank"]; //plain image syntax
fadeImages[1]=["images/thumbs_02.png", "http://www.fruit.com", "_blank"]; //image with link syntax
fadeImages[2]=["images/thumbs_03.png", "http://www.javascriptkit.com", "_new"]; //image with link and target syntax


var fadeImages2 = new Array();


//SET IMAGE PATHS. Extend or contract array as needed
fadeImages[3]=["images/thumbs_04.png", "http://www.fruit.com", "_blank"]; //plain image syntax
fadeImages[4]=["images/thumbs_05.png", "http://www.fruit.com", "_blank"]; //image with link syntax
fadeImages[5]=["images/thumbs_06.png", "http://www.javascriptkit.com", "_new"]; //image with link and target syntax
var fadebgcolor="422918"


////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;filterrogidXImageTransform.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;filterrogidXImageTransform.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>
</head>
<body>


<div class="photo" id="photoWrap">
<div class="photo">
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeImages, 150, 110, 0, 5000, 1, "R")

</script>
</div>
<div class="photo"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeImages2, 150, 110, 0, 3000, 1, "R")
</script>
</div>


<div class="photo"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeImages, 150, 110, 0, 6000, 1, "R")

</script>
</div>

<div class="photo"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeImages, 150, 110, 0, 8000, 1, "R")

</script>
</div>

<div class="photo"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeImages, 150, 110, 0, 1000, 1, "R")

</script>
</div>



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

[tonyking]

Just a heads up, any time you reference code in this forum, please use the code tags. You sent me a link via email, but it was not to the above page, so I am a little confused here, but here's what I see above:

You have 2 seperate slideshows in the head of your document, but the second one is not configured correctly. Any time you want a new slideshow, you must start back at zero with the first image. Your second instance fadeimages2, does not do so. If you changed the following:

//SET IMAGE PATHS. Extend or contract array as needed
fadeImages[3]=["images/thumbs_04.png", "http://www.fruit.com", "_blank"]; //plain image syntax
fadeImages[4]=["images/thumbs_05.png", "http://www.fruit.com", "_blank"]; //image with link syntax
fadeImages[5]=["images/thumbs_06.png", "http://www.javascriptkit.com", "_new"]; //image with link and target syntax

To this:

//SET IMAGE PATHS. Extend or contract array as needed
fadeImages[0]=["images/thumbs_04.png", "http://www.fruit.com", "_blank"]; //plain image syntax
fadeImages[1]=["images/thumbs_05.png", "http://www.fruit.com", "_blank"]; //image with link syntax
fadeImages[2]=["images/thumbs_06.png", "http://www.javascriptkit.com", "_new"]; //image with link and target syntax

You would then have 2 correctly configured slideshows, with 3 images each. You could then call to them in your html body with the following script:

<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")
 </script>

Which you have done, but you called the first one 5 times. I'm unsure if you wanted to do this, but in the future you found change

fadeshow(fadeimages,...... to fadeshow2(fadeimages,.... to match the configured slideshow you want to appear.

[gpechauer]

Solved,thanks for your help!
Greg

[boogyman]

in the future, when posting computer code please use [code][/code] tags