christiane: hilfe für bildergalerie

Hallo selfhtml Forum,
ich hoffe dass ich auf diesem Weg eine Lösung/Hilfe finde.
Ich möchte eine relativ einfache Bildergalerie erstellen, die folgendermaßen
aussieht: eine Übersichtsseite mit Vorschaubildern, nach klicken eines Vorschaubildes öffnet sich das betreffende Bild in höherer Auflösung in einem neuen Browserfenster.
Zusätzlich sollte man in dem neuen Browserfenster sich mit vor und zurück durch die
grösseren Bilder klicken können. An sich hab ich das schon so. Nur sehr umständlich, da ich nicht weiß, ob es möglich ist, dass ich nur mit einem einzigen neuen Browserfenster arbeite, in dem sich dann das jeweilige angeklickte Vorschaubild öffnet. Momentan hab ich halt für jedes Vorschaubild ein eigenes neues Browserfenster, d.h. es sind 60 Bilder, also 60 html-Seiten für die grösseren Bilder. Ich müsste also den java script Code für das Weiterklicken (habe ich auch schon) in jede der 60 html-Seiten einfügen, und ausserdem müsste ich in jeder seite den array für das Weiterklicken anpassen, denn ansonsten würde man zwar in der Vorschau zb auf Bild 27 klicken; es öffnet sich dann in einem neuen Fenster auch Bild 27 vergrössert, aber bei "vor" klicken fängt es dann mit Bild 1 zu zählen an und nicht mit 28.
Gibts für dieses Problem eine einfache Lösung??
Danke & lG Christiane

  1. Moin

    Tipp: Wenn du

    An sich hab ich das schon so.

    präzisieren würdest, zB durch Quellcode, ließe sich über

    Gibts für dieses Problem eine einfache Lösung??

    besser nachdenken!

    Gruß
    rfb

    --
    Man kann einen Menschen nichts lehren, man kann ihm nur helfen, es selbst zu entdecken.
    (Galileo Galilei)
    1. Hallo,
      naja Quellcode habe ich ja keinen für dieses Problem.
      Die Übersichtsseite ist eine ganz normale html-Tabelle mit
      Java Script Funktion bei klicken neues Browserfenster öffnen (in Dreamweaver
      generiert), und der Java Script Code für das Weiterklicken wäre folgender:

      <head>
      <title>Unbenanntes Dokument</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <script type="text/javascript">
      images = new Array(
         "../../pics/3dpics/33.jpg",
          "../../pics/3dpics/34.jpg",
          "../../pics/3dpics/35.jpg",
          "../../pics/3dpics/36.jpg",
          "../../pics/3dpics/37.jpg",
          "../../pics/3dpics/38.jpg",
          "../../pics/3dpics/39.jpg",
          "../../pics/3dpics/01.jpg",
          "../../pics/3dpics/02.jpg",
          "../../pics/3dpics/03.jpg",
          "../../pics/3dpics/04.jpg",
          "../../pics/3dpics/05.jpg",
          "../../pics/3dpics/06.jpg",
          "../../pics/3dpics/07.jpg",
          "../../pics/3dpics/08.jpg",
          "../../pics/3dpics/09.jpg",
          "../../pics/3dpics/10.jpg",
          "../../pics/3dpics/11.jpg",
          "../../pics/3dpics/12.jpg",
          "../../pics/3dpics/13.jpg",
          "../../pics/3dpics/14.jpg",
          "../../pics/3dpics/15.jpg",
          "../../pics/3dpics/16.jpg",
       "../../pics/3dpics/17.jpg",
          "../../pics/3dpics/18.jpg",
          "../../pics/3dpics/19.jpg",
          "../../pics/3dpics/20.jpg",
          "../../pics/3dpics/21.jpg",
          "../../pics/3dpics/22.jpg",
          "../../pics/3dpics/23.jpg",
          "../../pics/3dpics/24.jpg",
          "../../pics/3dpics/25.jpg",
          "../../pics/3dpics/26.jpg",
          "../../pics/3dpics/27.jpg",
          "../../pics/3dpics/28.jpg",
          "../../pics/3dpics/29.jpg",
          "../../pics/3dpics/30.jpg",
          "../../pics/3dpics/31.jpg",
          "../../pics/3dpics/32.jpg"

      );

      var imageIndex = 0;
      var imageMaxIndex = images.length - 1;

      function changeImage(direction) {
          imageIndex += direction;
          if (imageIndex > imageMaxIndex)
              imageIndex = 0;
          else if (imageIndex < 0)
              imageIndex = imageMaxIndex;
          document.getElementById("slideshow").src = images[imageIndex];
      }
      -->
      </script>
      </head>
      <body bgcolor="000000" topmargin="0" leftmargin="0">
      <table cellpadding="0" cellspacing="0">
       <tr>
        <td colspan="2"><img src="../../pics/3dpics/33.jpg" id="slideshow"
                              alt="slideshow pictures"
                              onclick="changeImage(1)" />></td>
       </tr>
        <tr>
        <td class="smalltitle" align="left"><a href="#" onClick="changeImage(-1);return false;"><font face="Arial, Helvetica, sans-serif" size="2" color="ffffff">Zur&uuml;ck</font></a></td>
        <td class="smalltitle" align="right"><a href="#" onClick="changeImage(1);return false;"><font face="Arial, Helvetica, sans-serif" size="2" color="ffffff">Vor</font></a></td>
       </tr>

      <tr>
        <td align="right" colspan="2"><a href="Javascript:window.close();"><font face="Arial, Helvetica, sans-serif" size="2" color="ffffff">Fenster schlie&szlig;en</font></a></td>
       </tr>
      </table>
      </body>
      </html>

      Ob das Dir weiterhilft??

      » Moin

      Tipp: Wenn du

      An sich hab ich das schon so.
      präzisieren würdest, zB durch Quellcode, ließe sich über
      Gibts für dieses Problem eine einfache Lösung??
      besser nachdenken!

      Gruß
      rfb

      1. Moin

        Hallo,
        naja Quellcode habe ich ja keinen für dieses Problem.

        doch doch, nur noch keinen zur Abhilfe!

        Die Übersichtsseite ist eine ganz normale html-Tabelle mit
        Java Script Funktion bei klicken neues Browserfenster öffnen

        da kannst du doch prima die Bildnummer mit Übergeben als Funktionsparameter

        (in Dreamweaver generiert)

        Oh :-(

        <head>
        <title>Unbenanntes Dokument</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <script type="text/javascript">
        images = new Array(
           "../../pics/3dpics/33.jpg",

        ...

        "../../pics/3dpics/32.jpg" );

        var imageIndex = 0;

        hier müstest du besagten Parameter wieder auslesen (zB von der fensteröffnenfunktion als Parameter an die Seitenadresse anhängen und per location.search auslesen

        var imageMaxIndex = images.length - 1;

        function changeImage(direction) {
            imageIndex += direction;
            if (imageIndex > imageMaxIndex)
                imageIndex = 0;
            else if (imageIndex < 0)
                imageIndex = imageMaxIndex;
            document.getElementById("slideshow").src = images[imageIndex];
        }

        hier fehlt jetzt sowas wie

        window.onload=function() {  
        document.getElementById("slideshow").src = images[imageIndex];  
        }
        

        um zum Start das aktuelle Bild zu laden

        </script>
        </head>
        <body bgcolor="000000" topmargin="0" leftmargin="0">
        <table cellpadding="0" cellspacing="0">
        <tr>
          <td colspan="2"><img src="dummy.jpg" id="slideshow"
                                alt="slideshow pictures"
                                onclick="changeImage(1)" />></td>
        </tr>
          <tr>

        ...

        zu deinem Tabellenlayout und dessen Nachteile solltest du dich mal kundig machen, zeitgemäßes layouten ist das wirklich nicht!

        </table>
        </body>
        </html>

        So brauchst du nun nur noch eine HTML-Datei für die Slideshow-Bilder

        Gruß
        rfb

        --
        Man kann einen Menschen nichts lehren, man kann ihm nur helfen, es selbst zu entdecken.
        (Galileo Galilei)