automatischer Bildwechsel

[Gast]

keine ahnung ob das hier wirklich reinpast aber ich versuch mal mein glück!!
ich möchte mir auf dem portal nen table reinbasteln, wo man bilder automatisch ablaufen lassen kann!!
das ganze mit so einem fade in/fade out effekt nennt man das glaub ich!!
meine überlegung ging irgendwie in die richtung es ähnlich zu machen wie bei den news, das man das ganze über ne textdatei steuert in der man dann einfach den link zu den entsprechenden bildern angibt!!
hat einer eventuell eine idee wie man sowas verwirklichen kann??
währe wirklich super wenn etwas in der art zu machen währe!!
THX schon mal in vorraus!!

[Gast]

ich kann dir nicht wirklich helfen
aber wenn du dich ein bischen mimm coden auskennst schau dir doch mal die photo gallery an
da kann man die bilder ja auch in ner slide show ablaufen lassen

[Gast]

tja das ist wohl das prob!!
leider hab ich vom coden auch absolut keine ahnung!!
aber wenn sowas ähnliches schon mit der photo gallery funktioniert, hmmm........dann müste es doch so auch irgendwie gehen!!
ich hoffe einer hat noch ne gute idee wie sowas realisierbar ist???

[saerdnaer]

poste doch mal den quelltext der photogallery seite auf der du das siehst..

normalerweise wird das per java applet oder flash gelöst...

ah

[Gast]

auf der seite wo ich das gesehen hab sieht das ganze im queltext so aus!!
wird übriegens auch auf dem portal in nem kleinen table angezeigt!!

<!-- START Box -->
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" bgcolor="#000000" width="160">
<TR><TD>
<table border="0" cellspacing=1 cellpadding=4 bgcolor="#000000" width="160">
<tr>
<td class="TableBevel" width="100%" bgcolor="#314542" id="tabletitle"><img src="http://******/******/images/topics.gif" border="0" align="absmiddle" alt=""> &nbsp;<font face="Tahoma, Arial, Helvetica" size="2" color="#bdc3c6"><b>Top-Aktuell</b></font></td></TR>
<TR>
<TD id="tableb" bgcolor="#EFD7B5"><font face="Tahoma, Arial, Helvetica" size="1"><CENTER><TABLE cellspacing="0" cellpadding="0" Align="center"><TR><TD width="21"><img src="http://******/filme/streifen_links.gif"></TD><TD>
<script language="JavaScript1.2" src="http://*******/filme/faders.js"></script>
</TD><TD width="21"><img src="http://*******/filme/streifen_rechts.gif"></TD></TR><TR><TD height="4" colspan="3"> </TD></TR><TR><TD colspan="3"><center><font size="1"><B>»[<a href="/board/board.php?boardid=23" target="_self">Ab zu den Links</a>]«</b></font></TD><TR></TABLE></CENTER></TD></TR></TABLE>
</TD></TR></TABLE>
<br>
<!-- ENDE Box -->

haben das ganze wohl auch über java gelöst, leider hab ich da ja noch weniger ahnung von wie von php!!
und da blick ich bis jetzt noch nicht mal so richtig durch!!
gibt es da irgendwie ne möglichkeit sowas zu realisieren??

[Gast]

also falls das ganze wirklich nur über einen javascript funktionieren sollte dann hab ich hier mal einen script gefunden der in etwa das produzieren sollte was ich mir so vorstelle!!
ist jetzt nur die frage ob man da was mit anfangen kann, und wenn ja wie includet man das in den table auf dem portal???
oder ist das alles viel zu kompliziert und es gibt eine einfachere lösung??

[Gast]

keiner ne idee wie mann sowas hinbekommen könnte???

[Gast]

den table mit der slideshow hab ich ja mittlerweile schon hinbekommen nur wird es noch nicht so angezeigt wie ich es eigentlich möchte!!
im mom sieht das ganze so aus!!

[ externes Bild ]

was natürlich totaler mist ist!!
solte eigentlich so aussehen!!

[ externes Bild ]

werd wohl irgendwo nen dicken fehler reingebaut haben....hab ja auch keine ahnung davon!! :?
kann mir eventuell einer dabei helfen das es richtig angezeigt wird??

hier mal der teil aus der portal_body.tpl:

<br>
<TABLE width=100%>
<TR>
<TD valign=top width=17%> <div align="left">
<table width="100%" border="1" cellpadding="2" cellspacing="0" style="border-collapse: collapse" class="forumline">
<tr>
<td class="toprow" colspan="2" height="25" width="100%"><center><b>Top Ten</b></center></td>
</tr>
<tr>
<td class="row1" width="100%">
<table border="0" cellpadding="3" cellspacing="0" ><tr><td align="center" class="row1"></tr>
<tr><td align="center"><img src="templates/icicle/images/streifen_links.gif"><td align="center">
<script language="JavaScript1.2">
//Fade-in image slideshow- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

var slideshow_width=92 //SET IMAGE WIDTH
var slideshow_height=135 //SET IMAGE HEIGHT
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]="1.jpg"
fadeimages[1]="2.jpg"
fadeimages[2]="3.jpg"
fadeimages[3]="4.jpg"
fadeimages[4]="5.jpg"
fadeimages[5]="6.jpg"
fadeimages[6]="7.jpg"
fadeimages[7]="8.jpg"
fadeimages[8]="9.jpg"
fadeimages[9]="10.jpg"
fadeimages[10]="11.jpg"
fadeimages[11]="12.jpg"


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

var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p]
}

var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1

if (ie4||dom)
document.write('<div style="position:relativ;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0]+'">')

var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1


function fadepic(){
if (curpos<100){
curpos+=10
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/100
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("fadepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curimageindex]
curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
}

function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/100
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)

</script><td align="center"><img src="templates/icicle/images/streifen_rechts.gif"></table>
</td>
</tr>

währe ja echt super wenn mir da einer helfen könnte!!
THX

[cyberalfa]

So, sorry, hat'n bissl länger gedauert, aber ich muss ja neben her noch
ne komplette Seite proggen...

Also folgendes, ich hab dir den teil mit den Bildern kurz gemacht, musst folgendes Script nur an der richtigen Stelle einbauen.

In deiner Page folgendes Suchen :

Code: Alles auswählen

.
.
.
<TABLE width=100%>
<TR>
  <TD valign=top width=17%>  <div align="left">
<table width="100%" border="1" cellpadding="2" cellspacing="0" style="border-collapse: collapse" class="forumline">
<tr>
    <td class="toprow" colspan="2" height="25" width="100%"><center><b>Top Ten</b></center></td>
</tr>
<tr>
  <td class="row1" width="100%">
.
.
.

Den Teil danach bis einschließlich

Code: Alles auswählen

.
.
.
if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)

</script><td align="center"><img src="templates/icicle/images/streifen_rechts.gif"></table>

ersetzt du durch

Code: Alles auswählen

<script language="JavaScript1.2">
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this  header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully

// =======================================
// set the following variables
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.jpg'
Pic[5] = '6.jpg'
Pic[6] = '7.jpg'
Pic[7] = '8.jpg'
Pic[8] = '9.jpg'
Pic[9] = '10.jpg'
Pic[10] = '11.jpg'
Pic[11] = '12.jpg'

// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
   preLoad[i] = new Image()
   preLoad[i].src = Pic[i]
}

function runSlideShow(){
   if (document.all){
      document.images.SlideShow.style.filter="blendTrans(duration=2)"
      document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
      document.images.SlideShow.filters.blendTrans.Apply()      
   }
   document.images.SlideShow.src = preLoad[j].src
   if (document.all){
      document.images.SlideShow.filters.blendTrans.Play()
   }
   j = j + 1
   if (j > (p-1)) j=0
   t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>

<p align="center">&nbsp;</p>
<div align="center">
  <center>
<table border="0" cellpadding="0" cellspacing="0" height="132">
  <tr>
    <td valign="middle" align="center">
        <img border="0" src="templates/icicle/images/streifen_links.gif" width="24" height="130">
    <td id="VU" width="92" valign="top" align="center">
      <p align="center">
      <img src="1.jpg" name='SlideShow' width=92 height=130></p>
      </td>
    <td valign="middle" align="center">
        <img border="0" src="templates/icicle/images/streifen_rechts.gif" width="24" height="130">
    </td>
  </tr>
</table>
  </center>
</div>

So, jetzt noch was in den Body-Tag :

vorher :

Code: Alles auswählen

<body bgcolor="#F0F3F6" text="#000000">

danach sollte es so aussehen :

Code: Alles auswählen

<body bgcolor="#F0F3F6" text="#000000" onload="runSlideShow()">

fertig!

viel Spass damit

PS: Guckst du da : <SLIDESHOW PREVIEW>

[Gast]

super cyberalfa klappt wunderbar!!
vielen dank für deine hilfe das hätte ich glaub ich nie hinbekommen!!
frag mich ja immer wie ihr das alles so hinbekommt!!
ich glaub da muss ich noch viiiieeel lernen!!