Thomas: Inhalt von div dynamisch laden

Hallo zusammen,

ich suche für folgendes Problem eine Lösung vill könnt ihr mir ja helfen.

Auf der rechten seite meiner Webseite befinden sich 9
kleine Bilder (also 9 div container).

Klickt man nun auf eines dieser Bilder so soll das ausgewähle Bild auf der linken Seite der Webseite in einem extra div groß dargestellt werden.

Nun habe ich keine Lust für jedes Bild eine neue HTML Seite zu erstellen.

Wisst ihr eine Lösung wie das ganze dynamisch geht?

Vielen Dank

Thomas

  1. Hallo,

    dafür gibt es haufenweise js-skripte. jquery vielleicht ein stichwort, und darauf aubauende picture-viewer, oder mootools, (viell. auch dojo oder scriptaciolous)
    Gruß

    jobo

  2. Hallo Thomas

    Auf der rechten seite meiner Webseite befinden sich 9
    kleine Bilder (also 9 div container).

    Was denn nun, Bilder oder Div-Container?
    Sinnvoll wäre wohl eher, die kleinen Bilder in eine <ul> zu packen, es handelt sich ja um eine Liste von mehreren kleinen Bildern.

    Klickt man nun auf eines dieser Bilder so soll das ausgewähle Bild auf der linken Seite der Webseite in einem extra div groß dargestellt werden.

    Warum sollte es dazu ein Div brauchen?

    Nun habe ich keine Lust für jedes Bild eine neue HTML Seite zu erstellen.

    Wisst ihr eine Lösung wie das ganze dynamisch geht?

    Das kannst du mit Javascript lösen.
    Die kleinen Bilder packst du jeweils in einen Link, der auf das große Bild verweist. (So kann jemand ohne Javascript das große Bild auch sehen, wenn auch nur separat und nicht direkt auf der Seite.)
    Dann rufst du mittels onclick ein Javascript auf, welches das große Bild austauscht.

    Auf Wiederlesen
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!
    1. @@Detlef G.:

      nuqneH

      Das kannst du mit Javascript lösen.

      Oder auch ohne:

      Die großen Bilder alle im HTML:

      <div id="bigpicture">  
        <img id="foo" src="foo" alt="foo"/>  
        <img id="bar" src="bar" alt="bar"/>  
        <img id="baz" src="baz" alt="baz"/>  
      </div>
      

      Aber nicht angezeigt:
      #bigpicture img { display: none }

      Die Thumbnails werden auf die Anker der großen Bilder verlinkt:

      <ul>  
        <li><a href="#foo"><img src="foo-thumbnail" alt="foo"/></a></li>  
        <li><a href="#bar"><img src="bar-thumbnail" alt="bar"/></a></li>  
        <li><a href="#baz"><img src="baz-thumbnail" alt="baz"/></a></li>  
      </ul>
      

      Das durch Click aufs Thumbnail ausgewählte Bild wird angezeigt [Meiert]:
      #bigpicture img:target { display: inline }

      Vorteil: Der Back-Button funktioniert. (Allerdings nicht in Opera, der verlangt nach JavaScript.)

      IEs, die die Pseudoklasse ':target' nicht kennen, verlangen auch nach JavaScript. IE 8 kennt das proprietäre Event 'hashchange', für IE < 8 wäre ein funktionierender Back-Button wüste Frickelei. (Event bei Zurück?)

      Am Montag mehr dazu …

      Qapla'

      --
      Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
      1. Hallo Gunnar

        Das kannst du mit Javascript lösen.

        Oder auch ohne:

        Ja, aber ich empfehle nicht unbedingt Varianten, die ich selbst nicht verwende.
        Bei CSS-Lösungen kann ich mir nicht sicher sein, dass die großen Bilder erst geladen werden, wenn sie wirklich gebraucht werden.

        Vorteil: Der Back-Button funktioniert. (Allerdings nicht in Opera, der verlangt nach JavaScript.)

        IEs, die die Pseudoklasse ':target' nicht kennen, verlangen auch nach JavaScript. IE 8 kennt das proprietäre Event 'hashchange', für IE < 8 wäre ein funktionierender Back-Button wüste Frickelei. (Event bei Zurück?)

        Also im Opera funktioniert es nicht ganz wie gewünscht und für den IE wird dann doch noch Javascript gebraucht.

        Nein, da werde ich wohl bei der klassischen Javascriptvariante bleiben, oder
        eine ganz klassische Bildergalerie mit kompletten Bilderseiten (eventuell um ein Javascript ergänzt, dass nur das Bild austauscht), oder
        ich verwende vielleicht doch eine funktionierende CSS-Variante ;-).

        a, a * {  
         display:block;  
         height:100px;  
         width:100px;  
         border:none;  
        }  
        a:focus, a:active {  
         background:#eee;  
        }  
        a:focus img, a:active img {  
          position:absolute;  
          left:150px;  
          top: 100px;  
          height:400px;  
          width:400px;  
        }  
        
        
        <a href="#"><img src="Bild1.jpg" alt="Bescreibung1"></a>  
        <a href="#"><img src="Bild2.jpg" alt="Bescreibung2"></a>  
        <a href="#"><img src="Bild3.jpg" alt="Bescreibung3"></a>  
        <a href="#"><img src="Bild4.jpg" alt="Bescreibung4"></a>  
        
        

        (Nur mal so schnell hingetippt, noch nie verwendet und ungetestet.)

        Auf Wiederlesen
        Detlef

        --
        - Wissen ist gut
        - Können ist besser
        - aber das Beste und Interessanteste ist der Weg dahin!
        1. [latex]Mae  govannen![/latex]

          <a href="#"><img src="Bild1.jpg" alt="Bescreibung1"></a>

          <a href="#"><img src="Bild2.jpg" alt="Bescreibung2"></a>
          <a href="#"><img src="Bild3.jpg" alt="Bescreibung3"></a>
          <a href="#"><img src="Bild4.jpg" alt="Bescreibung4"></a>

            
          Und ohne JS geht nix :(  Oft gesehen, es bleibt [jedes Mal] eine schlechte "Lösung".  
            
          Dann doch lieber in der Art  
          `<a href="Bild_gross.jpg" onclick="bild_funktion(this.href);return false"><img src="Bild_klein.jpg" alt="Beschreibung2"></a>`{:.language-html}  
            
          mit  
            
          ~~~javascript
          function bild_funktion(img_url) {  
            alert(img_url);  
            // Hier Code, der zur Bildanzeige führt  
          }
          

          Wobei sich das noch verfeinern lässt.

          Cü,

          Kai

          --
          „It's 106 miles to Chicago, we got a full tank of gas, half a pack of cigarettes,
          it's dark, and we're wearing sunglasses“.  „Hit it!“
          Foren-Stylesheet Site Selfzeugs
          SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?
          1. Hallo Kai

            Und ohne JS geht nix :(  Oft gesehen, es bleibt [jedes Mal] eine schlechte "Lösung".

            Hast du das überhaupt ausprobiert?

            Dann doch lieber in der Art

            Hast du überhaupt gelesen, was ich Thomas (dem OP) schrieb?
            Genau deine Version, nur nicht mit (für JS-Anfängern noch unverständlichen) Quelltextschnipseln, sondern mit Links zu SELFHTML.

            Hast meine Antwort an Gunnar überhaupt gelesen?
            Oder hast du nur den CSS-Schnipsel gesehen und wie auf ein rotes Tuch reagiert?

            Auf Wiederlesen
            Detlef

            --
            - Wissen ist gut
            - Können ist besser
            - aber das Beste und Interessanteste ist der Weg dahin!
        2. @@Detlef G.:

          nuqneH

          Bei CSS-Lösungen kann ich mir nicht sicher sein, dass die großen Bilder erst geladen werden, wenn sie wirklich gebraucht werden.

          Will man das denn?

          Es ist sicher ein Nachteil, (Bild-)Daten zu übertragen, die dann gar nicht benötigt werden.

          Es ist aber ein Vorteil, dass die (Bild-)Daten schon übertragen worden sind, wenn sie benötigt werden. Der Nutzer clickt auf ein Thumbnail, der Browser hat das großer Bild schon im Speicher und kann es in Nullkommanichts auch anzeigen, ohne dass der Nutzer auf die Ausführung seiner Aktion warten muss. Bessere user experience.

          Eben aus diesem Grund lädt man ja Bilder evtl. per JavaScript vor.

          Ob der Vorteil den Nachteil aufwiegt, hängt von der Anzahl und Dateigröße der Bilder ab und vom zu erwartenden Nutzerverhalten: Wird er viele der großen Bilder sehen wollen oder nur wenige?

          Verhalten sich eigentlich die Browser einheitlich, i.e. fordern alle Browser Bilder an, auch wenn sie auf 'display: none' gesetzt sind?

          Also im Opera funktioniert es nicht ganz wie gewünscht

          Doch, die Anzeige der großen Bilder beim Clicken auf die Thumbnails funktioniert einwandfrei.

          Beim Betätigen des Zurück-Buttons erschient zwar der vorige URI in der Adresszeile, aber nicht das vorige große Bild. Da müsste man nachhelfen:

          if (window.opera)  
          {  
            var last = location.hash;  
            setInterval(checkHash, 100);  
            
            function checkHash()  
            {  
              if (last != location.hash)  
              {  
                document.getElementById(last.substr(1)).style.display = "none";  
                document.getElementById(location.hash.substr(1)).style.display = "inline";  
                last = location.hash;  
              }  
            }  
          }
          

          (Nur mal so schnell hingetippt, ungetestet.)

          und für den IE wird dann doch noch Javascript gebraucht.

          Was doch aber kein Grund ist, für andere Browser eine JavaScript-freie Lösung anzubieten.

          Qapla'

          --
          Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
          1. Hallo Gunnar

            Bei CSS-Lösungen kann ich mir nicht sicher sein, dass die großen Bilder erst geladen werden, wenn sie wirklich gebraucht werden.

            Will man das denn?

            Je nach Anwendung ja oder nein (s. weiter unten).

            Verhalten sich eigentlich die Browser einheitlich, i.e. fordern alle Browser Bilder an, auch wenn sie auf 'display: none' gesetzt sind?

            Das weiß ich nicht, wie ich bereits schrieb.
            Ich bin eher für Lösungen, bei denen ich mir relativ sicher sein kann, dass sich die Browser wie von mir gewünscht verhalten.
            Wenn es zur Funktion der Seite erforderlich ist, dass die Bilder möglichst ohne Verzögerung dargestellt werden (z.B. Anzeige beim Hovern), dann halte ich ein Vorladen für sinnvoll (je nach Seite - CSS-Sprites, Vor- bzw. Nachladescript, vielleicht auch 1Pixel-Grafiken).
            Wenn die Anzeige mittels (Link-)Klick erfolgt, dann erwartet der Seitenbesucher durchaus, dass es möglicherweise eine Verzögerung gibt, bis das Ausgewählte angezeigt wird. In dem Fall möchte ich doch gern vermeiden, dass Bilder vorgeladen werden, von denen ich überhaupt nicht weiß, ob sie überhaupt angefordert würden.

            Ich persönlich kann es nicht leiden, wenn sich der Seitenaufbau verzögert, weil irgendetwas unbedingt vorgeladen werden soll, genauso wenig finde ich es toll, wenn mein Browser ewig weiterlädt, obwohl die Seite bereits komplett angezeigt wird.

            Bei deiner Version wüsste ich nicht, ob der Browser vorlädt oder nicht. Wenn er vorlädt, dann weiß ich nicht, in welcher Reihenfolge er das tun wird. Es könnte dann durchaus passieren, dass er Thumbnails noch nicht anzeigt, weil er mit dem Vorladen der großen Bilder beschäftigt ist.

            Also im Opera funktioniert es nicht ganz wie gewünscht

            Doch, die Anzeige der großen Bilder beim Clicken auf die Thumbnails funktioniert einwandfrei.

            Wenn du die einwandfreie Funktion des Zurück-Buttons als besonderen Vorteil deiner Variante hervorhebst, dann funktioniert es im Opera eben nicht _ganz_ wie gewünscht.

            und für den IE wird dann doch noch Javascript gebraucht.

            Was doch aber kein Grund ist, für andere Browser eine JavaScript-freie Lösung anzubieten.

            Wenn das deine Meinung ist, warum stellst du die Lösung überhaupt vor? ;-)

            Auf Wiederlesen
            Detlef

            --
            - Wissen ist gut
            - Können ist besser
            - aber das Beste und Interessanteste ist der Weg dahin!
            1. @@Detlef G.:

              nuqneH

              Bei deiner Version wüsste ich nicht, ob der Browser vorlädt oder nicht. Wenn er vorlädt, dann weiß ich nicht, in welcher Reihenfolge er das tun wird.

              AFAIK in der Reihenfolge, in der die Bilder im HTML-Quelltext stehen.

              Es könnte dann durchaus passieren, dass er Thumbnails noch nicht anzeigt, weil er mit dem Vorladen der großen Bilder beschäftigt ist.

              Ja, das ist unbedingt zu vermeiden. Die Thumbnails müssen im HTML vor den großen Bildern stehen.

              Und so sieht’s aus. (Stylesheet, Script)

              Qapla'

              --
              Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
              1. Hallo,

                Wenn er vorlädt, dann weiß ich nicht, in welcher Reihenfolge er das tun wird.
                AFAIK in der Reihenfolge, in der die Bilder im HTML-Quelltext stehen.

                davon würde ich auch ausgehen; das gilt aber nur für die *Anforderung* der Bildressourcen. Der Server muss die Anforderungen aber nicht unbedingt in der Reihenfolge bearbeiten und beantworten, in der sie eintreffen. Er könnte beispielsweise selbst noch einen Cache haben und Ressourcen, die er darin noch vorhält, bevorzugt ausliefern. Außerdem braucht die Übertragung des Bildes natürlich eine gewisse Zeit, die von der Datenmenge abhängt. Gut, das spielt uns im Falle der Thumbnails, die normalerweise leicht sein sollten, in die Karten.

                Sollten sich aber durch die Verarbeitung von Stylesheets und Javascripts weitere Anforderungen von Bildressourcen ergeben, ist deren Reihenfolge wohl kaum noch vorhersehbar.

                Ciao,
                 Martin

                --
                Treffen sich zwei Holzwürmer im Käse: "Na, auch Probleme mit den Zähnen?"