Javascript  »  Bilder  »  DOM-Slideshow

zur Übersicht

Kategorie	Bilder
Bezeichnung	DOM-Slideshow
ScriptDemo	Neues Fenster für Demo öffnen
Statistik	68521 Aufrufe davon 11x gestern
Keine Beschreibung vorhanden.
Javascript-Quellcode  (einfach markieren, kopieren und lokal abspeichern) <meta http-equiv="Page-Enter" content="RevealTrans(Duration=1,Transition=22)"> <style> body { background-color:#404040; font-size:12pt; color: #808080; } a {text-decoration:none; font-weight:bold; background-color:#606060; color:#404040;} a:hover {text-transform:uppercase;} .blend1 {filter:blendTrans(Duration=0.7, Transition=16);} .blend2 {filter:blendTrans(Duration=1.5, Transition=16);} .thumb {filter:Alpha(style=2 finish-opacity=100); cursor:'hand';-moz-opacity:0.5;} td {margin:5px; padding:5px;} </style> <script> if(document.all)var isIE=true; var fotos = new Array(); function neu(url,text) { Neu = fotos.length; fotos[Neu] = new Array(); fotos[Neu]["text"]=text; fotos[Neu]["pic"]=new Image() fotos[Neu]["pic"].src=url; } // editiere hier das große bild exakt=false; //false = runterskalieren | true = die exakte angegebene größe height=300; //bei exakt=false sollte die width sehr hoch gesetzt werden! width=900; preview=3; //anzahl der thumbnails in der manual-navi-leiste time=3500 //'slide'Zeit wie lange ein einzelnes Bild angezeigt wird in ms function skalieren(x,h,w,e) { H=fotos[x]["pic"].height; W=fotos[x]["pic"].width; W1=W; H1=H; if(!e) { if(H>h) { W1=W*h/H; H1=h; } if(W>w) { H1=H*w/W; W1=w; } }else { H1=h; W1=w; } var re = new Array(); re["w"]=W1; re["h"]=H1; return(re); W1=""; H1=""; W=""; H=""; } thumb_height=height/preview; thumb_width=100000; thumb_exakt=false; function thumb_table(offset) { table="<table width=100% height=100%>"; for(var x=offset; x<=offset+preview-1; x++) { if(fotos[x]) { var Size = skalieren(x,thumb_height,thumb_width,thumb_exakt); size="width="+Size["w"]+" height="+Size["h"]; table+="<tr><th><img "+size+" onclick=\"show('"+x+"',true)\" class='thumb' "+size+" src='"+fotos[x]["pic"].src+"' alt=\""+fotos[x]["text"]+"\"></th></tr>" } } table+="</table>"; return(table); } var nav=0; function navi(v) { v=Number(v); if(nav+v>fotos.length-preview) { V=fotos.length-preview; }else { if(nav+v<0) { V=0; }else { V=nav+v; } } nav=V; if(isIE) document.getElementById("thumbs").filters.blendTrans.Apply(); document.getElementById("thumbs").innerHTML=thumb_table(V); if(isIE) document.getElementById("thumbs").filters.blendTrans.Play(); } NAV=-1; function show(x,fs) { x=Number(x); if(fotos[x]) { var Size = skalieren(x,height,width,exakt); if(fs){size="width="+Size["w"]+" height="+Size["h"]; alt="alt=\"[show fullsize]\""; was=false} else {size=""; alt="alt=\"[show scaled size]\""; was=true} if(isIE) document.getElementById("inhalt").filters.blendTrans.Apply(); document.getElementById("inhalt").innerHTML="<table height=100% width=100%><tr><th><b><img onclick=\"show('"+x+"',"+was+")\" style=\"cursor:hand;\" "+size+" align=\"absmiddle\" src="+fotos[x]["pic"].src+" "+alt+"></th></tr></table>"; if(isIE) document.getElementById("inhalt").filters.blendTrans.Play(); document.getElementById("name").innerHTML=fotos[x]["text"]; document.getElementById("status").innerHTML=(x+1)+"/"+fotos.length; } NAV=x } var Timer; running=false; function start() { if(!running) { slideshow(); running=true; } } function slideshow() { NAV++; if(NAV>=fotos.length)NAV=0; show(NAV,true); Timer = setTimeout("slideshow()",time); document.getElementById("status2").innerHTML="[on]"; } function kill() { running=false document.getElementById("status2").innerHTML="[off]"; if(Timer)clearTimeout(Timer); } function init() { neu("http://flexi.j-ws.de/test/martin.jpg", "Der böse Martin" ); neu("http://flexi.j-ws.de/test/ich1.jpg", "Der Autor dieses Scripts" ); neu("http://flexi.j-ws.de/test/computer.jpg", "der böse Bill Gates" ); neu("http://flexi.j-ws.de/test/herzog-postkarte.gif", "der coole Roman H." ); neu("http://flexi.j-ws.de/test/verkehrszeichen.jpg", "antwort" ); neu("http://flexi.j-ws.de/test/xray1.jpg", "Bsp Foto1" ); neu("http://flexi.j-ws.de/test/xray2.jpg", "Bsp. Foto2" ); neu("http://flexi.j-ws.de/test/webcam.jpg", "noch ne Pappnase" ); document.getElementById("thumbs").style.height=10+height; setTimeout("document.getElementById('thumbs').innerHTML=thumb_table(0)",500); } </script> <body onload="init();window.resizeTo(750,600)"> <center><h1>DOM-Slideshow</h1></center><p> <table width="100%" border=0> <tr height=20> <td width=200> <center><a onclick="navi('-1')" href="#">Aufwärts</a></center></td> <th id=name> </th></tr> <tr> <td class=blend1 id=thumbs width=200>still loading... </td> <td class=blend2 id=inhalt><center><a onclick=start() href="#"> [start slideshow]</a></center></td></tr> <tr height=20> <td width=200> <center><a onclick="navi('1')" href="#">Abwärts</a></center></td> <td>slideshow: <a onclick=start() href="#">[start]</a> <a onclick=kill() href="#">[stop]</a> <span id=status> </span> <span id=status2>[off]</span></td> <tr> <td colspan=2>Blumen für dieses Script an: <a href="http://www.weristfelix.de.vu" target=_blank>www.weristfelix.de</a></td></tr></table>

Kommentare zu DOM-Slideshow

7 Kommentar(e) vorhanden / Anzeige der neuesten 5

am 03.04.2006 um 09:04 Uhr von Angie
habe das schript importiert, weiß aber leider nicht, wie ich meine Bilder hinein bekomme..... 

am 18.01.2006 um 14:19 Uhr von pit
sehr schön. gefällt mir sehr. thx!!!... 

am 08.10.2005 um 23:46 Uhr von Anubis
Echt geil gemacht!... 

am 08.03.2004 um 14:25 Uhr von Mehmet Tekin
Ein super script wirklich. Geht es auch waagerecht wenn ja WIE?... 

am 09.11.2003 um 19:31 Uhr von kamikaze
Eine tolle Sache diese Slideshow. Leider werden bei mir aber die Bildlaufleisten nicht meh... 


Alle Kommentare anzeigen   -   Kommentar hinzufügen