Help I Know I Am Stupid, No Need To Rub It IN

**xjaylocox** · 03-07-2008, 12:02 PM

Hello.

I recently got a new job becuase i blagged i could make them a website. i have done ok but i needed to put a slideshow in. i used the script for this page:

http://www.dynamicdrive.com/dynamici...nslideshow.htm - Ultimate Fade-in slideshow (v1.51)

right. i know a tinybit of coding but no where near as much as you guys do and i cant work out how to move the slideshow from one side of the page to the other. apart from that everything is working great.

please help.

thanks very much

**boogyman** · 03-07-2008, 01:35 PM

You aren't stupid, you are just stuck. Web programming is difficult, especially if you are just starting out. I have nearly ten(10) years experience and I still am learning a lot about Javascript.

Post the url to the problematic site so we can better help you troubleshoot

if your site is not live, post the code using [code][/code] tags

**xjaylocox** · 03-07-2008, 01:46 PM

Code:

<html>

<head>
<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]=["file:///C:/Users/Jay/Documents/My Web Sites/Picture 381.jpg"] //plain image syntax
fadeimages[1]=["file:///C:/Users/Jay/Documents/My Web Sites/Picture 382.jpg"] //image with link syntax
fadeimages[2]=["file:///C:/Users/Jay/Documents/My Web Sites/Picture 389.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=100 //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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>

<body>

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


 
</script>
</body>

</html>

**boogyman** · 03-07-2008, 04:19 PM

I am going to assume you will be putting this code inside of another template? or file of some sorts?
first thing to do is take out the initial code you have and place it in a new file.
then reference the javascript function file inside of the template file you wish the slideshow to appear on, and use a <div> with some CSS float: styling to place it where you want it on the page

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
     <title>__APPEARS_IN_TITLEBAR__</title>
     <script type="text/javascript" scr="/path/to/file.js">
</head>
<body>

<div style="float:left">
    TEXT
</div>
<div style="float:right">
     <script type="text/javascript">
          new fadeshow(fadeimages, 300, 225, 1, 3000, 1, "R");
     </script>
</div>

</body>
</html>

be sure to use the .js extension on the javascript file that you create

**xjaylocox** · 03-10-2008, 10:06 AM

Originally Posted by boogyman

I am going to assume you will be putting this code inside of another template? or file of some sorts?
first thing to do is take out the initial code you have and place it in a new file.
then reference the javascript function file inside of the template file you wish the slideshow to appear on, and use a <div> with some CSS float: styling to place it where you want it on the page

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
     <title>__APPEARS_IN_TITLEBAR__</title>
     <script type="text/javascript" scr="/path/to/file.js">
</head>
<body>

<div style="float:left">
    TEXT
</div>
<div style="float:right">
     <script type="text/javascript">
          new fadeshow(fadeimages, 300, 225, 1, 3000, 1, "R");
     </script>
</div>

</body>
</html>

be sure to use the .js extension on the javascript file that you create

hey, thanks for your help! i didnt understand most of what you said but took managed to squeeze your codes in. the onl;y reason its on a blank page with nothing else is because its a test page coz i didnt wanna mess up the coding for the rest of my site.

and now it works perfectly and everyone thinks i am really clever. thanks mate.

Thread: Help I Know I Am Stupid, No Need To Rub It IN

Thread Tools

Search Thread

Help I Know I Am Stupid, No Need To Rub It IN

thanks

Bookmarks

Bookmarks

Posting Permissions