Fade In Code für den Banner Bereich benutzen!

[narges]

Halli Hallo alle miteinander,

als erstes möchte ich mich für eure Hilfe bedanken! Ich habe immer so viel gefragt,dennoch habt ihr mir immer sehr zügig und nett geantwortet und vor allen Dingen auch hilfreich!
So nun wollte ich euch fragen,wie ich es schaffe einen solchen Fade In Banner zu machen?

Beispiel (schaut euch unten links die Bilder an,die sich abwechseln):
http://neversaygoodby.webs.com/morphs.htm

Und ich wollte dasselbe mit den Banners meines Forums machen. Ich meine,dass sich die Banner abwechselnd zeigen. Ach ja und ich weiß,dass man es sicherlich bei den Templates ändern sollte,nicht wahr???? Ich hoffe,ich habe es gut genug erklärt

LG,
Narges

[Zuckerpuppe]

Hallo Narges

ich habe deine Frage mal in "allgemeine Diskussionen" verschoben, da das kein Problem mit einem Script oder Code ist. (Du suchst ja nur nach einem Script, richtig?)
Vielleicht meldet sich ja ein User, der sowas schon in seinem Forum eingebaut hat.
Ich persönlich kenne zwar ein Script, das in den Modulen funktioniert, wo ich aber nicht weiß, ob das auch als Header einsetzbar ist.
Vielleicht hilft dir das ja schon weiter?:
http://www.webmasterpro.de/coding/article/javascript-bildershow.html

Leider habe ich jetzt auch keine Zeit mehr, das als Header-Script auszutesten, da ich jetzt weg muss.

[narges]

Hi Zuckerpuppe!

Danke für deine Antwort. Soweit hast du mich fast richtig verstanden...lol.
Ich habe ja auch bereits den Code der wie folgt lautet:

(vor dem HEAD teil)

Code:

<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 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]=["http://i212.photobucket.com/albums/cc307/narges-online/Untitled-3-11.jpg", "", ""] //plain image syntax
fadeimages2[1]=["http://i212.photobucket.com/albums/cc307/narges-online/Untitled-2-31.jpg", "", ""] //image with link syntax
fadeimages2[2]=["http://i212.photobucket.com/albums/cc307/narges-online/Untitled-1-81.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: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>


(die Wunschstelle)

Code:

<center>
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 0=yes), optionalRandomOrder)
new fadeshow(fadeimages2, 189, 135, 0, 3000, 0)
 
</script>

</center>

Meine Frage nun: wo soll das alles hin und würde es klappen???

PS: ich habe den Code bereits in einem HTML editor ausprobiert und funktioniert hat es auch. Aber bei forumieren.de bin ich mir da nicht so sicher und ich wollte ehrlich gesagt auch nicht,dass ich ausversehen irgendetwas bei mir "kaputtmache"....

[#Frank]

Ich antworte mal für Zuckerpuppe.
Das obere ist ja ein Script, das du über die JavaScript Verwaltung in dein Forum setzen kannst.

Den Unteren steil must du in das Template overall_header an der Stelle einsetzen an der jetzt das Foren Logo eingesetzt ist.

Dann sollte das auch klappen.

[narges]

Ja,genau das wollte ich wissen. Vielen lieben dank Frank!!!! Das Forumieren Team kann sich kaum vorstellen,wie dankbar ich für eure schnellen,hilfreichen Antworten bin. Lang lebe das Forumieren Team

PS:

wie kann ich den Javascript in den zweiten code verlinken?
Ich habe es gerade genauso gemacht,wie du gesagt hast,aber es hat nicht funktioniert.... ????

[#Frank]

Ich kann es heute nicht mehr testen, aber eigentlich sollte das so funktionieren.

[narges]

Schade,aber da muss ich mich wohl noch etwas gedulden

[#Frank]

Ich werde mich am Nachmittag oder am Abend noch mla melden. Ich habe nun auch Wochenende und eventuell noch was vor.
Aber wir werden das schon hin bekommen.

[narges]

Das ist wirklich sehr nett von dir Frank! 1000xDankeschön!!
Und ich verstehe das auch

[#Frank]

So, nun melde ich mich hier auch wieder.
Ich habe es nun auf verschiedene Weisen versucht, aber es scheint nicht hin zuhauen.
Ich habe das Script über die Javascript Verwaltung eingesetzt, und den Aufruf in das Template gesetzt und so geht es nicht, Auch das Gesamte Script habe ich in das Template eingesetzt, und auch da Klappt es nicht.
So wie es aussieht, klappt das mit dem Script so nicht.
Das Einzige was Funktioniert ist, das du dein gerammtes Script auf eine HTML Seite einsetzt und dann das Logo durch diese HTML Seite in einem Iframe ersetzt.
Wenn du das willst, dann gehe bitte wie Folgt vor:

Schritt 1:
Du erstellst im Forum eine HTML Seite unter:
Module HTML HTML-Seiten-Verwaltung
Dort legst du eine HTML Seite mit diesem Inhalt an:

Code:

<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 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]=["http://i212.photobucket.com/albums/cc307/narges-online/Untitled-3-11.jpg", "", ""] //plain image syntax
    fadeimages2[1]=["http://i212.photobucket.com/albums/cc307/narges-online/Untitled-2-31.jpg", "", ""] //image with link syntax
    fadeimages2[2]=["http://i212.photobucket.com/albums/cc307/narges-online/Untitled-1-81.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: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>
<center>
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 0=yes), optionalRandomOrder)
new fadeshow(fadeimages2, 189, 135, 0, 3000, 0)
</script>
</center>

Diese Seite Speicherst du nun. Ich gehe davon aus, das du das schon gemacht hast.

Schritt 2: Iframe Einsetzen.
Du öffnest das Template:
overall_header zum bearbeiten.
Dort suchst du diesen Abschnitt:

Code:

                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     

                     <!-- END switch_logo_center -->

Diesen änderst du nun so ab:

Code:


                     <!-- BEGIN switch_logo_center -->
                     <iframe src="http://retro-fuchs.forumieren.com/h5-bilderwechsel" width="190" height="150" frameborder="0" scrolling="no"></iframe>
                     

                     <!-- END switch_logo_center -->

Hier setzt du aber nicht die Adresse der HTML Seite ein so wie sie hier angegeben ist, sondern die Adresse zu deiner HTML Seite.
Solltest du andere Bilder in den Script eingesetzt haben, musst du die Hohe und die Breite deines Iframe noch anpassen.
Dann das Template Absenden und Veröffentlichen und deine HTML Seite mit dem Bilderwechsel sollte bei dir anstelle des Logos erscheinen.

So sieht es bei mir nun aus:


Wie es dann aussehen kann, siehst du hier:
http://frank3.forumieren.eu/forum

[narges]

WOW Super!!! Vielen lieben dank Frank! Du hast dir echt viel Mühe gemacht,mir zu helfen und ich bin dir so dankbar!! 1000 Dank

[#Frank]

Haut es denn jetzt hin?
In welchen Forum hast du das denn eingesetzt?
In dem das in deinem Profil steht ist es ja nicht drin.

[narges]

Ich habe es in meinem Testforum gemacht.
http://testkareenatest.forumieren.com/

Ich habe da noch eine kleine Frage,hoffe wirklich,dass es dich nicht nervt: Kann man die Bilder mit einem Link versehen? So in etwa:

<a href="link"><img src="link"></a>

???

[#Frank]

Ja... Das findest du auch in der Lexi Help erklärt. Schau da mal unter "B" nach.
Und da das mit deinem Header nun klappt, schließe ich hier.

[#Frank]

Ich muss hier noch mal einen Hinweis anbringen, weil mir gestern aufgefallen ist, das unser Freund der Internet Explorer ein Logo was auf diese Weise eingesetzt wurde nicht darstellt.
Alle anderen Browser kommen mit dem Script zurecht, aber im IE wird hier nichts angezeigt.
Ich bitte das zu beachten.