Javascript Bildergalierie funktioniert nicht! :(

ctdr · 28. März 2012

Javascript:

var wo = null;
function oeffnefenster(w) {
document.getElementById('weisseflaeche').style.display = 'block';
document.getElementById('pfeillinks').style.display = 'block';
document.getElementById('pfeilrechts').style.display = 'block';
document.getElementById('xbutton').style.display = 'block';
if(w == 20) {
wo = 20;
document.getElementById('fst1').style.display = 'block';
document.getElementById('fst2').style.display = 'none';
document.getElementById('fst3').style.display = 'none';
document.getElementById('fst4').style.display = 'none';
document.getElementById('fst5').style.display = 'none';
document.getElementById('fst6').style.display = 'none';
document.getElementById('fst7').style.display = 'none';
document.getElementById('fst8').style.display = 'none';
}

if(w == 21) {
wo = 21;
document.getElementById('fst1').style.display = 'none';
document.getElementById('fst2').style.display = 'block';
document.getElementById('fst3').style.display = 'none';
document.getElementById('fst4').style.display = 'none';
document.getElementById('fst5').style.display = 'none';
document.getElementById('fst6').style.display = 'none';
document.getElementById('fst7').style.display = 'none';
document.getElementById('fst8').style.display = 'none';
}

if(w == 22) {
wo = 22;
document.getElementById('fst1').style.display = 'none';
document.getElementById('fst2').style.display = 'none';
document.getElementById('fst3').style.display = 'block';
document.getElementById('fst4').style.display = 'none';
document.getElementById('fst5').style.display = 'none';
document.getElementById('fst6').style.display = 'none';
document.getElementById('fst7').style.display = 'none';
document.getElementById('fst8').style.display = 'none';
}

if(w == 23) {
wo = 23;
document.getElementById('fst1').style.display = 'none';
document.getElementById('fst2').style.display = 'none';
document.getElementById('fst3').style.display = 'none';
document.getElementById('fst4').style.display = 'block';
document.getElementById('fst5').style.display = 'none';
document.getElementById('fst6').style.display = 'none';
document.getElementById('fst7').style.display = 'none';
document.getElementById('fst8').style.display = 'none';
}

if(w == 24) {
wo = 24;
document.getElementById('fst1').style.display = 'none';
document.getElementById('fst2').style.display = 'none';
document.getElementById('fst3').style.display = 'none';
document.getElementById('fst4').style.display = 'none';
document.getElementById('fst5').style.display = 'block';
document.getElementById('fst6').style.display = 'none';
document.getElementById('fst7').style.display = 'none';
document.getElementById('fst8').style.display = 'none';
}

if(w == 25) {
wo = 25;
document.getElementById('fst1').style.display = 'none';
document.getElementById('fst2').style.display = 'none';
document.getElementById('fst3').style.display = 'none';
document.getElementById('fst4').style.display = 'none';
document.getElementById('fst5').style.display = 'none';
document.getElementById('fst6').style.display = 'block';
document.getElementById('fst7').style.display = 'none';
document.getElementById('fst8').style.display = 'none';
}

if(w == 26) {
wo = 26;
document.getElementById('fst1').style.display = 'none';
document.getElementById('fst2').style.display = 'none';
document.getElementById('fst3').style.display = 'none';
document.getElementById('fst4').style.display = 'none';
document.getElementById('fst5').style.display = 'none';
document.getElementById('fst6').style.display = 'none';
document.getElementById('fst7').style.display = 'block';
document.getElementById('fst8').style.display = 'none';
}

if(w == 27) {
wo = 27;
document.getElementById('fst1').style.display = 'none';
document.getElementById('fst2').style.display = 'none';
document.getElementById('fst3').style.display = 'none';
document.getElementById('fst4').style.display = 'none';
document.getElementById('fst5').style.display = 'none';
document.getElementById('fst6').style.display = 'none';
document.getElementById('fst7').style.display = 'none';
document.getElementById('fst8').style.display = 'block';
}
}

function closeall() {
document.getElementById('weisseflaeche').style.display = 'none';
document.getElementById('pfeillinks').style.display = 'none';
document.getElementById('pfeilrechts').style.display = 'none';
document.getElementById('xbutton').style.display = 'none';
document.getElementById('fst1').style.display = 'none';
document.getElementById('fst2').style.display = 'none';
document.getElementById('fst3').style.display = 'none';
document.getElementById('fst4').style.display = 'none';
document.getElementById('fst5').style.display = 'none';
document.getElementById('fst6').style.display = 'none';
document.getElementById('fst7').style.display = 'none';
document.getElementById('fst8').style.display = 'none';
}


function back() {
wo--;
if(wo == 0) {
setTimeout("oeffnefenster('27')",0);
}
if(wo == 20) {
setTimeout("oeffnefenster('20')",0);
}
if(wo == 21) {
setTimeout("oeffnefenster('21')",0);
}
if(wo == 22) {
setTimeout("oeffnefenster('22')",0);
}
if(wo == 23) {
setTimeout("oeffnefenster('23')",0);
}
if(wo == 24) {
setTimeout("oeffnefenster('24')",0);
}
if(wo == 25) {
setTimeout("oeffnefenster('25')",0);
}
if(wo == 26) {
setTimeout("oeffnefenster('26')",0);
}
if(wo == 27) {
setTimeout("oeffnefenster('27')",0);
}
}

function next() {
wo++;
if(wo == 28) {
setTimeout("oeffnefenster('20')",0);
}
if(wo == 21) {
setTimeout("oeffnefenster('21')",0);
}
if(wo == 22) {
setTimeout("oeffnefenster('22')",0);
}
if(wo == 23) {
setTimeout("oeffnefenster('23')",0);
}
if(wo == 24) {
setTimeout("oeffnefenster('24')",0);
}
if(wo == 25) {
setTimeout("oeffnefenster('25')",0);
}
if(wo == 26) {
setTimeout("oeffnefenster('26')",0);
}
if(wo == 27) {
setTimeout("oeffnefenster('27')",0);
}
}

var wo = null;
function oeffnebild(w) {
document.getElementById('weisseflaeche').style.display = 'block';
document.getElementById('pfeillinks').style.display = 'block';
document.getElementById('pfeilrechts').style.display = 'block';
document.getElementById('xbutton').style.display = 'block';
if(w == 10) {
wo = 10;
document.getElementById('bild1').style.display = 'block';
document.getElementById('bild2').style.display = 'none';
document.getElementById('bild3').style.display = 'none';
document.getElementById('bild4').style.display = 'none';
document.getElementById('bild5').style.display = 'none';
}

if(w == 11) {
wo = 11;
document.getElementById('bild1').style.display = 'none';
document.getElementById('bild2').style.display = 'block';
document.getElementById('bild3').style.display = 'none';
document.getElementById('bild4').style.display = 'none';
document.getElementById('bild5').style.display = 'none';
}

if(w == 12) {
wo = 12;
document.getElementById('bild1').style.display = 'none';
document.getElementById('bild2').style.display = 'none';
document.getElementById('bild3').style.display = 'block';
document.getElementById('bild4').style.display = 'none';
document.getElementById('bild5').style.display = 'none';
}

if(w == 13) {
wo = 13;
document.getElementById('bild1').style.display = 'none';
document.getElementById('bild2').style.display = 'none';
document.getElementById('bild3').style.display = 'none';
document.getElementById('bild4').style.display = 'block';
document.getElementById('bild5').style.display = 'none';
}

if(w == 14) {
wo = 14;
document.getElementById('bild1').style.display = 'none';
document.getElementById('bild2').style.display = 'none';
document.getElementById('bild3').style.display = 'none';
document.getElementById('bild4').style.display = 'none';
document.getElementById('bild5').style.display = 'block';
}
}

function closeall() {
document.getElementById('weisseflaeche').style.display = 'none';
document.getElementById('pfeillinks').style.display = 'none';
document.getElementById('pfeilrechts').style.display = 'none';
document.getElementById('xbutton').style.display = 'none';
document.getElementById('bild1').style.display = 'none';
document.getElementById('bild2').style.display = 'none';
document.getElementById('bild3').style.display = 'none';
document.getElementById('bild4').style.display = 'none';
document.getElementById('bild5').style.display = 'none';
}

function back() {
wo--;
if(wo == 0) {
setTimeout("oeffnebild('14')",0);
}
if(wo == 10) {
setTimeout("oeffnebild('10')",0);
}
if(wo == 11) {
setTimeout("oeffnebild('11')",0);
}
if(wo == 12) {
setTimeout("oeffnebild('12')",0);
}
if(wo == 13) {
setTimeout("oeffnebild('13')",0);
}
if(wo == 14) {
setTimeout("oeffnebild('14')",0);
}
}

function next() {
wo++;
if(wo == 15) {
setTimeout("oeffnebild('10')",0);
}
if(wo == 11) {
setTimeout("oeffnebild('11')",0);
}
if(wo == 12) {
setTimeout("oeffnebild('12')",0);
}
if(wo == 13) {
setTimeout("oeffnebild('13')",0);
}
if(wo == 14) {
setTimeout("oeffnebild('14')",0);
}
}

Ich weis nicht wo der Hund begraben ist!

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="keywords" content="Rock,hardrock,austropop,austrorock,dialektmusik,dialekt,mundart,austro,musik,oesterreich">
<meta name="description" content="Dialektmusik die Rockt" >
<title>...</title>
<link rel="stylesheet" href="fenster.css" type="text/css">
<link rel="stylesheet" href="format.css" type="text/css">
<link rel="stylesheet" href="menue.css" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<script type="text/javascript" src="fenster.js"></script>



<link rel="shortcut icon" title="image/x-icon" href="http://www.tutorials.de/images/ribn.ico">

</head>
<body>


<table align="center" width="100%" id="aussen" cellspacing="0" cellpadding="0" border="0"   >
<tr>
<td align="center"  width="100%" >

<table  width="701"  cellspacing="0" cellpadding="0" border="0"   >

<tr>
          <td  id="top2">
            <!--menü-->
            <p><img src="http://www.tutorials.de/images/ribisls2.jpg"></p>
            <table align="center"  width="750"  id="menu2"   border="0" cellpadding="0" cellspacing="0"    >
<tr>

                <td ><a href="index.html"  >Neues</a></td>
                <td class="menutrenn">&nbsp;•&nbsp;</td>
                <td ><a href="termine.html"  >Termine</a></td>
                <td class="menutrenn">&nbsp;•&nbsp;</td>
                <td ><a href="band.html"  > Band</a></td>
                <td class="menutrenn">&nbsp;•&nbsp;</td>
                <td ><a href="fotos.html"  >Fotos</a></td>
                <td class="menutrenn">&nbsp;•&nbsp;</td>
                <td ><a href="media.html"  >Video</a></td>
                                <td class="menutrenn">&nbsp;•&nbsp;</td>
                                <td ><a href="mp3.html"  >Musik</a></td>
                                <td class="menutrenn">&nbsp;•&nbsp;</td>
                                <td ><a href="shop.html"  >Shop</a></td>
                                <td class="menutrenn">&nbsp;•&nbsp;</td>
                                <td ><a href="kontakt.html"  >Kontakt</a></td>

</tr>
</table>



<!--ende oben--></td>
</tr>

</table>

<table width="701"  align="center"  border="0" cellpadding="0" cellspacing="0"  >

<tr>

<td valign="top" width="750" id="main" height="600"   >
<table      border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="0" height="0" align="center" id="inbox"> <h1 align="right"><font color="#333333" size="2">Fotos</font></h1>
    
<div onClick="closeall()" id="weisseflaeche"></div>
<div onClick="closeall()" id="xbutton"></div>
<div onClick="back()" id="pfeillinks"></div>
<div onClick="next()" id="pfeilrechts"></div>

<div align="center">

<div id="fst1" class="bildzoom"><img src="http://www.tutorials.de/images/clumsys/clum1.jpg" width="600" /></div>
<div id="fst2" class="bildzoom"><img src="http://www.tutorials.de/images/clumsys/clum2.jpg" width="600" /></div>
<div id="fst3" class="bildzoom"><img src="http://www.tutorials.de/images/clumsys/clum3.jpg" width="600" /></div>
<div id="fst4" class="bildzoom"><img src="http://www.tutorials.de/images/clumsys/clum4.jpg" height="600"/></div>
<div id="fst5" class="bildzoom"><img src="http://www.tutorials.de/images/clumsys/clum5.jpg" width="600" /></div>
<div id="fst6" class="bildzoom"><img src="http://www.tutorials.de/images/clumsys/clum6.jpg" width="600" /></div>
<div id="fst7" class="bildzoom"><img src="http://www.tutorials.de/images/clumsys/clum7.jpg" width="600" /></div>
<div id="fst8" class="bildzoom"><img src="http://www.tutorials.de/images/clumsys/clum8.jpg" width="600" /></div>

<div id="bild1" class="bildzoom"><img src="http://www.tutorials.de/images/backstage/back1.jpg" height="580" /></div>
<div id="bild2" class="bildzoom"><img src="http://www.tutorials.de/images/backstage/back2.jpg" height="580" /></div>
<div id="bild3" class="bildzoom"><img src="http://www.tutorials.de/images/backstage/back3.jpg" width="580" /></div>
<div id="bild4" class="bildzoom"><img src="http://www.tutorials.de/images/backstage/back4.jpg" width="580"/></div>
<div id="bild5" class="bildzoom"><img src="http://www.tutorials.de/images/backstage/back5.jpg" width="580" /></div>

</div>


                  <div align="center">
                    <p>&nbsp;</p>
                  <p></p>
                  <table width="700" border="0">
                  <tr>
                    <td><table width="700" cellspacing="10" border="0">
                      <tr>
                        <td width="50%">Clumsy's - 07.10.2011</td>
                        <td width="50%">Backstage</td>
                      </tr>
                      <tr>
                        <td><img onClick="oeffnefenster('20')" src="http://www.tutorials.de/images/clumsys/clum1.jpg" height="130" width="210"></td>
                        <td><img onClick="oeffnebild('10')" src="http://www.tutorials.de/images/backstage/back3.jpg" width="210" height="130"></td>
                      </tr>
                   
                    </table></td>
                  </tr>
                </table></td>
              </tr>

            </table>
</td>


</tr>
</table>
<!-- fuss-->
<table width="701" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td align="center" id="fuss" >

<br>

<img src="http://www.tutorials.de/images/star.gif" width="20" height="26" border="0" alt="">
</td>
</tr>

</table>
<!-- ende fuss-->

</td>
</tr>
</table>

</body>
</html>

Die dazu passende Html Datei!

Maniac · 28. März 2012

Und du denkst das sie diesen unformatierten Code jemand anschauen will?

SpiceLab · 28. März 2012

"Funktioniert nicht" ist eine aussagelose Fehlerbeschreibung.

sheel · 28. März 2012

Nachträglich Willkommen bei tutorials.de,

im eigenen Interesse gehört alles dringend sinnvoll formatiert.
Dann kennt man sich auch selbst gleich besser aus...

Und, wurd ezwar auch schon gesagt, aber einfach 450 Zeilen reinklatschen
ohne irgendeine (bitte genaue) Problembeschreibung
kann nur zum Rätselraten werden.

Etwas zum JS:
Verwende doch Schleifen!
Gibt es einen Grund für die Fensternummern?

Zum HTML:
Ich hab mir erlaubt, etwas (Nicht JS-relevantes) rausnehmen...
Und warum sind überall (nicht existierende) URIs von tutorials.de drin :suspekt:

SpiceLab · 28. März 2012

sheel hat gesagt.:
Und warum sind überall (nicht existierende) URIs von tutorials.de drin :suspekt:

Das ist ein tutorials.de-/vBulletin-Bug beim Editieren (Option "Links automatisch umwandeln" ist aktiv)

sheel · 28. März 2012

(Offtopic)
Hm, sowas.
Kannte das Linkumwandeln nur als Einfügung von [ url ]
Aber das macht es tatsächlich auch....

ctdr · 28. März 2012

Ich möchte mich dafür entschuldigen! Bin leider noch schlechter als ein Anfänger. Ich habe mich einfach mal schnell angemeldet und habs einfach ohne nachzudenken reingestellt ohne es zu formatieren.

Und das mit dem Fehler. Ich habe mit Js eine Bildergalerie schreiben wollen. Das Problem ist das ich zwei geschrieben habe und jetzt funktioniert die eine Galerie nicht. Die erste Bildergalerie wird angezeigt mit dem Anfangsbild, mit den Pfeilen und dem "X". Nur kann ich nichts damit machen außer es schließen durch die function closeall, nur bleibt das Bild trotzdem.

Wo liegt hier das Problem!? und ich weis nicht wie das mit formatieren gemeint habt?

ctdr · 30. März 2012

Ich habe das so gemeint. Eine Hauptseite mit vielen kleinen Bildern. Hinter jedem Bild sollte ein Album sein. In dem Fall wenn ich afu ein Bild von dieser Seite klicke sollte sich ein Fenster mit einem vergrößertem Bild, Pfeiltasten und ein XButton öffnen und drücken eine Aktion auslösen. Das habe ich ja geschafft, Für ein Album auf einer HTML Seite. Nur wenn ich jetzt mehr als ein Album auf die HTML Seite geben, dann kommen diese Probleme auf:

1. Die Bilder vermischen sich von den Alben,
2. die function (closeall) zum Schließen von Alles fällt aus.

Wenn ich jetzt auch alle Namen von jeweiligen functions oder anderen Sachen ändere passiert es auch. Wenn ich mehrere .js Dateien mache wird wahrscheinlich die Eine .js Datei von der anderen .js Datei blockiert.

Meine Frage: Wie kann ich es schaffen, das ich mehrere Alben auf einer HTML Seite habe, die sich nicht in die Quere kommen!?

ikosaeder · 21. Mai 2012

Hm, ich bin selber noch ein Anfänger in JS und arbeite gerade ebenfalls an einer Bildergalerie.
Meine Vorschlag:
Speichere deine Bilder als Array
z.B.:

Code:

var bilder01 =new Array("bild1.jpg","bild2.jpg");
var bilder02 =new Array("bild_A.jpg","bild_B.jpg");

Dann kannst du eine Funktion erstellen, die mit der jeweiligen Bildgalerie aufgerufen wird und Funktionen für vor, zurück etc, enthält.

Code:

function Galerie(Bildarray){
   function next(){
   }
   function prev(){
   }
   function showBild(){
   }
    function closeAll(){
   }
   ...mehr Code
}

Die Funktionen next bzw. prev erhöhen, erniedrigen einen Zähler, der dem Index des Bildes aus dem Array entspricht.
Dann versiehst du deine Vorschaubilder mit einem Link, der den Aufruf der Galeriefunktion mit der entsprechenden Galerie als Parameter enthält.

Code:

<a href=javascript:Galerie(bilder01)>Bilder01</a>

Dann kannst du beliebig viele Galerien definieren, die sich nicht vermischen können.
Der Code wird übersichtlicher, die Bild Arrays lassen sich über Schleifen füllen sofern die Bilder nummeriert sind.

Code:

for (i=1;i++;i<X){
 bilder01[i]="Bilder/Bilder01"+i
}

Javascript Bildergalierie funktioniert nicht! :(

ctdr

Grünschnabel

Maniac

Erfahrenes Mitglied

SpiceLab

ZENmechanic

sheel

I love Asm

SpiceLab

ZENmechanic

sheel

I love Asm

ctdr

Grünschnabel

ctdr

Grünschnabel

ikosaeder

Teekannen-Agnostiker

Neue Beiträge