Hallo UlrichBa
Leider kann ich Dir die Adressen meiner Seiten nicht posten, da das Ganze noch im Versuchsstadium ist bzw. noch nicht online gestellt ist. In der letzten Nacht habe ich alles auf verschiedene Arten probiert und siehe es funktioniert !
Habe als Laie versucht mich in den Code hinein zu denke und habe den Pferdefuss (nur für meine Bedürfnisse !) an dieser Lösung auch lokalisiert. Der gesamte Code wird in die htm-site (head-section) eingebaut und dann muss im array explizit name/path der img. angegeben werden. Dann wird in der body-section der Aufruf der JS-function eingetragen. Da ich eben keine JS-Kenntnisse habe kann ich den code nicht umbauen. Der Originalcode stellt für meine Bedürfnisse einen grossen Aufwand dar, da ich pro Foto-session eine eine htm-site machen müsste (1 - n, bis dato ca.32).
Meine Vorstellung ist eigentlich ziemlich simple: Die JS-function soll event. nicht im htm-code verschachtelt sein und per parameter (path, vorderer teil des img.-Namen - 20051231, size etc.) gesteuert werden. Die Anzahl img, size Name etc. soll wahlweise angezeigt werden
Zu Deiner Frage «warum mehrere Seiten . . .» - Page A beinhaltet pro Foto-session ein thumbnail (zum Aufruf der slideshow pro session). Page B beinhaltet den functionalen JS-code und page C den Aufruf der JS-procedure. Nachdem ich mir die letzte Nacht um die Ohren schlug, weis ich es ja besser . . . ;-)
Nun bin ich am Testen einer anderen Version die ich im web gefunden habe. Ich werde mich sicher wieder in der Angelegenheit melden und Hilfe erflehen.
Ich danke Dir bestens für Dein Interesse an meinem Problem - Gruss bricot
[br][br]
Erstellt am: 22.01.09 um 20:30:47
[br]Guten Abend
Habe eine slideshow im web gefunden, die ich in meine page eingebaut habe. Funktioniert alles bestens - aber . . . Um die JS nicht pro htm-document (pro foto-session) redundant zu führen, möchte ich sie auslagern.
Da ich über keine JS-Kenntnisse verfüge bräuchte ich Hilfe. Kann mir bitte jemand sage was ich ändern muss bzw. was ich in welches JS-Document (xxx.js) einfügen muss.
Vielen Dank im voraus für Hilfe - mfg bricot
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN>
<html>
<head>
<style type=text/css>
.centerdiv{ /*IE method of centering a relative div*/
text-align: center;
}
.centerdiv>div{ /*Proper way to center a relative div*/
margin: 0 auto;
}
</style>
<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.
*
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
***********************************************
* Step 1: Insert the following script to the HEAD section of your page:
* Configure the array fadeimages[] to reference the images you want to be displayed.
***********************************************/
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
*/
fadeimages[0]=[f_img/f_20051010/20051010_024.jpg, , ]
fadeimages[1]=[f_img/f_20051010/20051010_025.jpg, , ]
fadeimages[2]=[f_img/f_20051010/20051010_026.jpg, , ]
fadeimages[3]=[f_img/f_20051010/20051010_027.jpg, , ]
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>
<link rel=stylesheet media=screen href=f_site.css />
</head>
<body background=f_img/hintergr.jpg leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
<p class=bold24><br />&nbsp; DAY - 10.10.2005 <br /><br /></p>
<div class=centerdiv>
<!-- ***********************************************
Step 2: All that's left now is to insert the below code into the BODY of your
page where you want the slideshow(s) to be displayed.
************************************************ -->
<script type=text/javascript>
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 800, 600, 0, 2000, 1, R)
//new fadeshow(fadeimages2, 140, 225, 0, 3000, 0)
</script>
</div>
</body>
</html>
