Bild im selben Fenster über Link öffnen / positionieren

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Bild im selben Fenster über Link öffnen / positionieren

    Hallo zusammen,

    ich bin leider nicht so der Crack was PHP und Java-Script angeht. Nichts desto trotz habe ich mich an die Umgestaltung einer Bildergalerie gemacht und stoße mittlerweile an meine Grenzen.

    Was ich habe: Thumbs, welche dynamisch aus einem Ordner geladen werden, die wenn man sie anklickt in einer neuen Seite in ihrer jeweiligen Originalgröße angezeigt werden.

    Was ich brauche: Das was ich habe, nur dass die Bilder in ihrer Originalgröße nicht in einer neuen Seite, sondern in der bestehenden Seite an einer bestimmten Position neben den Thumbs angezeigt werden sollen.

    Wenn ich das richtig sehe, muss ich in ein DIV eine Blind-Grafik einbetten, welche ich dann durch Anklicken der Thumbs anspreche/austausche. Ich habs versucht - leider ist irgendwo ein Fehler drin. Villeicht kann mir ja einer helfen..

    PHP-Code:
    <body> 
     
    <div id="imageBox"> 
       <img src="pic00.jpg" alt="" name="start"> 
    </div> 
     
    <script type="text/javascript"> 
    // swapImage 
    function displayImage(imageURL){  
    var element = document.getElementById("imageBox");  
    element.style.backgroundImage = "url("+imageURL+")";  

    //--> 
    </script> 
     
     
    <?php 
    // Galerien ermitteln 
    $verzeichnisse glob"galerien/*"GLOB_ONLYDIR ); 
    echo 
    '<div id="nav"><ul>'
    foreach (
    $verzeichnisse as $dir

        
    $dirname array_popexplode"/"$dir ) ); 
        echo 
    '<li><a href="' .$_SERVER['PHP_SELF']. '?galerie=' .$dirname'">' .$dirname'</a></li>'

    echo 
    '</ul></div>'
     
    // Galerie anzeigen 
    if (isset( $_GET['galerie'] ) ) 

        echo 
    '<div id="preview">'
        
    $break 1
        
    $bilder glob"galerien/{$_GET['galerie']}/thumbs/*.jpg" ); 
        
    natsort$bilder ); 
        foreach (
    $bilder as $bild
        { 
            
    $bild array_popexplode"/"$bild ) ); 
            echo 
    '<a href="javascript:void(0)" onclick="displayImage("galerien/' .$_GET['galerie']. 
            
    '/images/' .urlencode$bild ). '") class="thumb"><img src="galerien/' .$_GET['galerie']. 
            
    '/thumbs/' .$bild'" /></a>'
            echo (
    $break == 0) ? "<br />\n" ""
            
    $break++; 
        } 
        echo 
    '</div>'

    ?> 
     
    </body>
    Danke.

    Niceo
    Zuletzt geändert von Niceo; 05.10.2010, 10:10.

  • #2
    Brich bitte zuerst deinen Code um. Und zwar so, dass man auch ohne 2000er-Monitorauflösung nicht horizontal scrollen muss.

    Danke
    Peter
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

    Kommentar


    • #3
      Sorry!

      Gesagt, getan.

      Niceo.

      Kommentar


      • #4
        Wenn du nicht so der Crack in JavaScript bist, empfehle ich dir Lightbox. Nur übertreib es nicht mit den Effekten. Die nerven langsam.

        Peter
        Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
        Meine Seite

        Kommentar


        • #5
          Also ich glaubs ja nicht - habe vor 3 Wochen mit dem Thema PHP angefangen. Rate mal mit welchem Tutorial... Genau, dem von deiner Seite. Muss schon sagen: Gratulation - das versteht sogar einer (wie ich) der bisher nur Ahnung von Flash und Html hatte.

          Aber nun nochmal zu meinem Problemchen... Das Script hatte früher die Lightbox drin - will das aber nicht so haben, sondern nachher in meine Flashdatei einbauen.

          Kann sich mir einer annehmen?

          Niceo.

          Kommentar


          • #6
            Zitat von Niceo Beitrag anzeigen
            Also ich glaubs ja nicht - habe vor 3 Wochen mit dem Thema PHP angefangen. Rate mal mit welchem Tutorial... Genau, dem von deiner Seite. Muss schon sagen: Gratulation - das versteht sogar einer (wie ich) der bisher nur Ahnung von Flash und Html hatte.
            Gern geschehen
            Zitat von Niceo Beitrag anzeigen
            sondern nachher in meine Flashdatei einbauen.
            Das musst du mal genauer erklären. Denn mit Flash sieht die Sache schon ganz anders aus.

            Peter
            Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
            Meine Seite

            Kommentar


            • #7
              Aaalso:

              Das angestrebte Herzensglück ist eine dynamische Bildergalerie mit PHP und Flash.

              Ich hab mir ein hohes Ziel gesetzt , in etwa so:

              http://images.template-help.com/scre...800/28843.html

              Ich habe ein erstes Script, welches mir dynamisch aus den Originalbildern Thumbs erzeugt und diese dann über das zweite Script (Code siehe oben) ausgibt. Das funktioniert bisher alles bis auf das oben beschriebene Problemchen mit dem Öffnen der Thumbs.

              Flash soll schlussendlich nur zu designtechnischen Zwecken genutzt werden. Das PHP Script soll die eigentliche Arbeit (das Laden und Öffnen der Bilder) verrichten und wird an der entsprechenden Bildmarke in Flash eingefügt.

              Habe kein Problem damit an dem Projekt mehrere Monate zu sitzen. Aber ich wills selbst in meinem Design hin bekommen und nicht für 188 Kröten eines kaufen.

              Man merkt vielleicht schon - ich bin mehr Designer als Entwickler... Deswegen auch mein Hilferuf. :-\

              Liebe Grüße,

              Niceo.
              Zuletzt geändert von Niceo; 05.10.2010, 11:18.

              Kommentar


              • #8
                Zitat von Niceo Beitrag anzeigen
                Flash soll schlussendlich nur zu designtechnischen Zwecken genutzt werden. Das PHP Script soll die eigentliche Arbeit (das Laden und Öffnen der Bilder) verrichten und wird an der entsprechenden Bildmarke in Flash eingefügt.
                Da muss ich passen. Von Flash hab ich herzlich wenig Ahnung.

                Peter
                Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                Meine Seite

                Kommentar


                • #9
                  Hallo Peter,

                  das mit Flash bekomm ich schon hin. Mir geht es lediglich um das besagte oben dargestellte Script. Wenn mir hier einer sagen könnte wo mein Fehler liegt, wäre ich schon sehr glücklich.

                  Das Problem muss irgendwo hier liegen:

                  PHP-Code:
                  <script type="text/javascript"
                  // swapImage 
                  function displayImage(imageURL){  
                  var 
                  element document.getElementById("imageBox");  
                  element.style.backgroundImage "url("+imageURL+")";  

                  //--> 
                  </script
                  oder hier:

                  PHP-Code:
                  echo '<a href="javascript:void(0)" onclick="displayImage("galerien/' .$_GET['galerie']. 
                          
                  '/images/' .urlencode$bild ). '") class="thumb"><img src="galerien/' .$_GET['galerie']. 
                          
                  '/thumbs/' .$bild'" /></a>'
                  nur hab ich keine Ahnung wo. Hier das Script in Aktion mit Fehler:

                  Galerie

                  Grüße,

                  Niceo.

                  Kommentar


                  • #10
                    Warum nicht ein einfaches

                    PHP-Code:
                    function displayImage(imageURL){  
                      
                    document.images['start'].src imageUrl;

                    Peter
                    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                    Meine Seite

                    Kommentar


                    • #11
                      Na ich muss doch den Platzhalter im DIV austauschen...

                      Den hier:

                      PHP-Code:
                      <div id="imageBox"
                         <
                      img src="pic00.jpg" alt="" name="start"
                      </
                      div
                      und das wollte ich ermöglichen, indem ich die Bilder aus meinem Verzeichnis in die Variable "imageBox" lade:

                      PHP-Code:
                      <script type="text/javascript"
                      // swapImage 
                      function displayImage(imageURL){  
                      var 
                      element document.getElementById("imageBox");  
                      element.style.backgroundImage "url("+imageURL+")";  

                      //--> 
                      </script
                      Welche ich dann über das jeweilige Thumb aufrufe und in den Platzhalter einspiele...

                      Mit

                      PHP-Code:
                      function displayImage(imageURL){  
                        
                      document.images['start'].src imageUrl;

                      schaff ich das doch nicht.. oder doch? Ich hab heut irgendwie nen Knick in der Optik. Am besten wirds sein ich les mir nochmal das Anfängertut durch, ich peils noch nicht wirklich.

                      Danke im Voraus für die Bemühungen...

                      Niceo.

                      Kommentar


                      • #12
                        Zitat von Niceo Beitrag anzeigen
                        schaff ich das doch nicht.. oder doch?
                        Hast du es denn überhaupt mal ausprobiert? Außerdem tauschst du in meinem Beispiel einfach nur den Pfad aus. Das reicht doch, oder?

                        Peter
                        Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                        Meine Seite

                        Kommentar


                        • #13
                          Hmm.. Habs probiert. Jetzt bekomm ich nen Fehler:

                          http://www.veronico.de/g2/

                          Parse error: syntax error, unexpected '/', expecting '&' or T_VARIABLE in /var/www/web517/html/veronico/g2/index.php on line 26



                          PHP-Code:
                          <html>
                          <head>
                          <title>Galerie</title>
                          <meta http-equiv="expires" content="0; charset=iso-8859-1" />
                          <style type="text/css">
                          * { margin: 0; padding: 0; }
                          #nav { float: left; width: 180px; }
                          #preview { float: left; }
                          ul { margin: 25px; }
                          li a { color: #0000FF; text-decoration: none; }
                          li a:hover { color: #FF0000; text-decoration: underline; }
                          a.thumb img { filter:alpha(opacity=50); -moz-opacity: 0.50; opacity: 0.50; border: solid 2px #FFFFFF; }
                          a.thumb:hover img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; }
                          </style>
                          </head>
                          <body>
                          <?php
                          function displayImage(galerien/{$_GET['galerie']}/images/*.jpg){  
                            document.images['start'].src = <img src="galerien/' .$_GET['galerie']. '/thumbs/' .$bild. '" />;
                          }  
                          ?>
                          <?php
                          // Galerien ermitteln
                          $verzeichnisse = glob( "galerien/*", GLOB_ONLYDIR );
                          echo '<div id="nav"><ul>';
                          foreach ($verzeichnisse as $dir)
                          {
                           $dirname = array_pop( explode( "/", $dir ) );
                           echo '<li><a href="' .$_SERVER['PHP_SELF']. '?galerie=' .$dirname. '">' .$dirname. '</a></li>';
                          }
                          echo '</ul></div>';
                          // Galerie anzeigen
                          if (isset( $_GET['galerie'] ) )
                          {
                           echo '<div id="preview">';
                           $break = 1;
                           $bilder = glob( "galerien/{$_GET['galerie']}/thumbs/*.jpg" );
                           natsort( $bilder );
                           foreach ($bilder as $bild)
                           {
                            $bild = array_pop( explode( "/", $bild ) );
                            echo '<a href="javascript:void(0)" onclick="displayImage("galerien/' .$_GET['galerie']. 
                            '/images/' .urlencode( $bild ). '") class="thumb"><img src="galerien/' .$_GET['galerie']. 
                            '/thumbs/' .$bild. '" /></a>';
                            echo ($break % 2 == 0) ? "<br />\n" : "";
                            $break++;
                           }
                           echo '</div>';
                          }
                          ?>
                          </body>
                          </html>
                          Zuletzt geändert von Niceo; 05.10.2010, 16:14.

                          Kommentar


                          • #14
                            1. Code umbrechen (erneut),
                            2. Grundlagen der Syntax von PHP lernen.
                            I don't believe in rebirth. Actually, I never did in my whole lives.

                            Kommentar


                            • #15
                              Bitte mal wieder Code umbrechen. Außerdem, was ist das denn bitteschön?
                              PHP-Code:
                              <?php
                              function displayImage(galerien/{$_GET['galerie']}/images/*.jpg){  
                                document.images['start'].src = <img src="galerien/' .$_GET['galerie']. '/thumbs/' .$bild. '" />;
                              }
                              Man kann JavaScript doch nicht wild mit PHP mischen. Und informier dich mal über das Thema Zeichenkettenverknüpfung.

                              Peter
                              Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                              Meine Seite

                              Kommentar

                              Lädt...
                              X