✔ Diashow in separatem Fenster

M

msmopic

Mitglied
Ich möchte über einen Link ein neues Fenster öffnen lassen, indem in einem bestimmten Intervall Fotos gezeigt werden.
Der Code, den ich geschrieben habe funktioniert nicht. Was mache ich falsch?


HTML-Datei:

HTML: 
...
<a href="javascript:diashowADV()"><font color="black">Diashow ADV</a>
...

css-Datei:

Code: 
var diabild = new Image();
var dia = new Array ("pics/ADV1.jpg", "pics/ADV1-klein.jpg", "pics/ADV2.jpg", "pics/Aula.jpg");
var z_c=-1;
var win2;
function diashowADV()
  {z_c++;
   win2 = window.open("","Diashow","width=500,height=375,resizable=yes");	
   win2.document.images[0].src = dia[z_c];
   
   
   if (z_c==2)
	 {z_c=-1;
	 }
   win2.setTimeout("diashowADV()", 2000);

  }
 
Code: 
win2.document.images[0].src = dia[z_c];
Du öffnest ein leeres Fenster....dort befindet sich kein Dokument, und erst recht nicht images[0]...daher kannst du darauf auch nicht zugreifen.

Workaround: schreibe per write() den HTML-Code für ein komplettes Dokument in das Fenster.... auf die Art kannst du gleich die hässlichen Ränder um das Bild eliminieren, indem du das Bild absolute bei 0px/0px platzierst.
 
Nö, anders gehts nicht.
Wo kein Dokument ist, kann man auch nix im Dokument ändern.

So kompliziert ist es aber garnicht....

Code: 
<script type="text/javascript">
<!--
var diabild = new Image();
var dia = new Array (
                        "pics/ADV1.jpg", 
                        "pics/ADV1-klein.jpg", 
                        "pics/ADV2.jpg", 
                        "pics/Aula.jpg");

var z_c=-1;
var win2;

function diashowADV()
{
    if(diashowADV.arguments.length==1)
        {
        win2=false;
        }
    //Falls Fenster nicht geöffnet, öffnen und HTML-Dokument hineinschreiben
    if(!win2)
        {
        win2 = window.open("","Diashow","width=500,height=375,resizable=yes");	
        
        with(win2.document)
            {
                open();
                writeln('<html><head><title>Bild</title></head><body>');
                writeln('<div style="position:absolute;top:0;left:0"><img src="dummie.gif"border="1"></div>');
                writeln('</body></html>');
                close();
            }
        
        }
     
     if(!win2.closed)
        {        
            win2.focus();
            z_c++;
            win2.document.images[0].src = dia[z_c];
            win2.document.title = dia[z_c].replace(/^.*\//g,'');
        
            if (z_c==dia.length-1)
	            {
	            z_c=-1;
	            }
	        window.setTimeout("diashowADV()", 2000);
        }
  }
//-->
</script>

Wichtig dabei ist, dass du der Funktion von dem Link aus einen Parameter mitgibst, damit sie mehrmals benutzt werden kann:
Code: 
<a href="javascript:diashowADV(true)">klick</a>
 
Kannst Du mir erklären, was die fett gekennzeichneten Zeilen bedeuten? Es sind die Zeilen aus Deinem Codevorschlag. Dieser funktioniert einwandfrei, nur hätte ich gern die Erklärung. Wäre sehr nett... Danke!

Code: 
function diashowADV()
{if(diashowADV.arguments.length == 1)
   {win2 = false;
   }
   
 //Falls Fenster nicht geöffnet, öffnen und HTML-Dokument hineinschreiben
 if(!win2)
   {win2 = window.open("","Diashow","width=500,height=375,resizable=yes");	  
	with(win2.document)
		{open();
		 writeln('<html><head><title>Pics ADV</title></head><body>');
		 writeln('<div style="position:absolute;top:0;left:0"><img src="pics/ADV1-klein.jpg" border="1"></div>');
		 writeln('</body></html>');
		 close();
		}
   }
	 
 if(!win2.closed)
   {win2.focus();
	z_c++;
	win2.document.images[0].src = dia[z_c];
	win2.document.title = dia[z_c].replace(/^.*\//g,'');
		
	if (z_c==dia.length-1)
   {z_c=-1;
   }
 window.setTimeout("diashowADV()", 2000);
   }
 }
 
Klar doch :)

if(diashowADV.arguments.length == 1)
....damit frage ich ab, ob der Funktion ein Parameter übergeben wurde. Dies ist nur der Fall, wenn man auf den Link klickt(Parameter:true).
Wird die Funktion erneut per setTimeout() aufgerufen, gibt es keine Parameter.
Damit wird also ermittelt, ob grad der Link angeklickt wurde.
Warum: Falls zwischendurch das Fenster geschlossen wurde, soll es beim erneuten Klick wieder aufgehen. Ohne diese Abfrage wurde es fast "unschliessbar" sein....da es bei jedem Funktionsaufruf geöffnet würde, fallse es geschlossen wurde....wäre etwas nervig :)

if(!win2)in der vorigen Abfrage wurde win2 auf "false" gesetzt(falls grad der link angeklickt wurde).....ist dies der Fall, wird wie vorher erwähnt, das popup geöffnet(falls es nicht da ist)....und das Dokument beschrieben.


with(win2.document)....damit bezieht sich alles in diesem Abzweig auf das Dokument im Popup.

Man könnte stattdessen auch schreiben
Code: 
win2.document.open();
win2.document.writeln('<html><head><title>Pics ADV</title></head><body>');
win2.document.writeln('<div style="position:absolute;top:0;left:0"><img src="pics/ADV1-klein.jpg" border="1"></div>');
win2.document.writeln('</body></html>');
win2.document.close();
....man spart sich damit also Schreibarbeit ;)

if(!win2.closed)
...fragt ab, ob das Popup nicht geschlossen wurde.

win2.document.title = dia[z_c].replace(/^.*\//g,'');
der Titel der Seite wird geändert..... in dem Fall auf den Dateinamen des Bildes...damit da nicht der ganze Pfad, wie im Array angegeben steht, wird alles bis zum letzten Slash aus dem Pfad entfernt.

Gruss fatalus
 
Vielen Dank für die aufschlussreiche Erklärung der einzelnen Codes! Hat mir sehr weitergeholfen. Nur noch eine kurze Frage: Haben die Parameter in der Klammer von replace eine genaue Bedeutung oder hast Du da nur wirrwarr reingeschrieben. Ich habe dies nämlich auch ohne die Parameter getestet und das lief genauso. Hier nochmal die Zeile:

Code: 
win2.document.title = dia[z_c].replace(/^.*\//g,'');

Gruss
mopic
 
Nö, die haben schon eine Bedeutung.

Es sollte mich wundern, wenn da ohne "Parameter" das selbe im Titel erscheint....da müsste dann zumindest immer das "pics/" dabei stehen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück