Bildergalerie mit PHP/JavaScript

Dieses Thema Bildergalerie mit PHP/JavaScript im Forum "Webentwicklung, Hosting & Programmierung" wurde erstellt von Klombert, 2. Juni 2003.

Thema: Bildergalerie mit PHP/JavaScript Ich möchte eine Bildergalerie auf meiner Webseite erstellen, was mir zum Teil auch schon gelungen ist. Dabei lese...

  1. Ich möchte eine Bildergalerie auf meiner Webseite erstellen, was mir zum Teil auch schon gelungen ist. Dabei lese ich mit PHP eine Datei aus und gebe die gefundenen Bilder als Thumbnails in einer Tabelle aus.
    Jetzt möchte ich, wenn eines der Thumbs angeklickt wird oder beim mouseover, dass dieses Bild in der normalen Größe in einer anderen Tabellenzeile angezeigt wird. Das die Bilder in einem neuem Browserfenster angezeigt werden, habe ich schon hinbekommen. Ist aber nicht das was ich möchte und ich möchte nicht mit Frames arbeiten.

    Danke
     
  2. Setze auf die Thumb-Bilder ein->onmouseover'-Event und schreibe eine entsprechende JavaScript-Function, die das grosse Bild an der vorgesehenen Stelle öffnet:
    z.b.
    Code:
    html>
    <head>
    <script language=JavaScript>
    <!--
    function showImg(BildName)
    {
    window.document.images[BigBild].src=./ + BildName;
    }
    // -->
    </script>
    </head>
    <body>
    <table width=100%>
    <tr>
    <td><img src=thumb1.jpg onmouseover=showImg('Bild1.jpg'); height=50></td>
    <td><img src=thumb2.jpg onmouseover=showImg('Bild2.jpg'); height=50></td>
    <td><img src=thumb3.jpg onmouseover=showImg('Bild3.jpg'); height=50></td>
    <td><img src=thumb4.jpg onmouseover=showImg('Bild4.jpg'); height=50></td>
    </tr>
    <tr>
    <td colspan=4><img src= name=BigBild></td>
    </tr>
    </table>
    </body>
    </html>
    Das Script öffnet das angegebene Bild (BildName) im dafür vorgesehenen Bild (BigBild).
     
  3. Das Beispiel ist soweit ganz gut. Ich bekomme aber das zusammenspiel zwischen PHP und JavaScript nicht hin. Wie kann man das denn kombinieren? Der Aufruf der Funktion will nicht klappen. In folgender Zeile gebe ich die Thumbs aus:
    echo &lt;img width=\120\ height=\70\ src=\images/$datei\>\n;

    Ich erzeuge ja eine dynamische Tabelle mit Thumbs, indem ich ein Verzeichnis auslese. Die Bilder sind nur einmal vorhanden, in der Originalgröße und werden lediglich verkleinert dargestellt.
     
  4. Code:
    echo <img width=\120\ height=\70\ src=\images/$datei\ onmouseover=\showImg('$datei')\>\n;
    JavaScript hat auch mit PHP nichts zu tun. Die JS-Funktion wird wie der restliche HTML-Code mit PHP-Echo erzeugt.
     
  5. Hi

    Probier evtl. mal:
    Code:
    &lt;script language=JavaScript>
    &lt;!--
    function showImg(BildName)
    {
       window.document.images[4].src=./ + BildName;
    }
    // -->
    &lt;/script>
    
    Gruß, Michael
     
  6. Soweit habe ich es hinbekommen und es funktioniert wunderbar. Allerdings habe ich jetzt ein anderes Problem bemerkt. Es können nicht alle Bilder angezeigt werden.
    Gewisse Bilder werden nicht angezeit, egal in welchem Verzeichnis sie sind. Sie werden aber erkannt und als Platzhalter angezeigt. Unter Eigenschaften/rechte Maustaste wird auch der korrekte Link angezeigt. Selbst beim Mouseover. Folgendes Script habe ich genommen, ist dort ein Fehler?

     
  7. Werden diese->gewissen Bilder' korrekt angezeigt, wenn du die URL direkt im Browser angibst ?
    http:// ..... .... .... /images/...jpg
     
  8. Das Problem mit den Bildern ist gelöst, es saß mal wieder vor der Tastatur 8)
    Das Problem ist jetzt nur noch, das ich im JavaScript Teil auch die Auswahl z.B. Auswahl2 übergeben muss. Daraus setzt sich die Verzeichnisstrucktur zusammen.
     
  9. Da deine Bildergalerie pro Auswahl neu geladen wird, kannst du die->Auswahl' als globale JavaScript-Variable definieren:
    Code:
    echo var Auswahl=$ausw2
    oder so ähnlich. Dann kannst du im JavaScript auf diese Variable zurückgreifen, ohne die Auswahl an die Funktion zu übergeben ...
    Code:
    <script language=JavaScript>
       <!--
       function showImg(BildName)
       {
          window.document.images[BigBild].src = Auswahl + BildName;
       }
       // -->
    </script>
    
     
Die Seite wird geladen...

Bildergalerie mit PHP/JavaScript - Ähnliche Themen

Forum Datum
Bildergalerie erstellen Windows XP Forum 10. Jan. 2007
Bildergalerie/Slideshow in Video umwandeln Audio, Video und Brennen 28. Feb. 2006
Bildergalerien downloaden? Wie? Software: Empfehlungen, Gesuche & Problemlösungen 17. Feb. 2006
Bildergalerie und Tonmaterial auf DVD Audio, Video und Brennen 9. Jan. 2005
S: Bildergalerie fürs Web Software: Empfehlungen, Gesuche & Problemlösungen 3. Nov. 2002