Ankündigung

Einklappen
Keine Ankündigung bisher.

Mit nem Anfänger Schritt für Schritt nen Slider bauen...

Einklappen

Neue Werbung 2019

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

  • #46
    Dein Modal gibts nur einmal auf der Seite. Z.b.

    HTML-Code:
      <div id="modal" class="largeImage"><img src="" id="modalImage"></div>
    Zusätzlich packst du in den <a>-Tag die URL des grossen Bildes.

    HTML-Code:
      <a href="../images/waren/fu0011/fu0011+b.jpg" class="popup"><img src="../images/waren/fu0011/tn_fu0011+b.jpg" alt="Futterhaus" class="verk_foto"></a>
    Dann holst du mit JS bei einem Klick auf .popup die URL des Bildes aus dem <a>-Tag und fügst sie ins grosse Bild ein.

    HTML-Code:
      $(document).ready(function(){
      $('.popup').click (function(event) {  
        event.preventDefault();    
        var url = $(this).attr('href');    
        $('#modalImage').attr('src', url);    
        $('#modal').fadeIn();    
    })});
    Alles ungetestet. Aber so in etwa wird das normalerweise gemacht. Hat auch den Vorteil, dass die grossen Bilder nur bei Bedarf geladen werden.

    Kommentar


    • #47
      Super, dass funktioniert. Jetzt versuche ich, in die Lightbox den Slider einzubauen. Dazu hab ich mal ne Frage zur Schreibweise.
      HTML-Code:
                          <div id="fu0010+b.jpg" class="test">    
                            <a href="../images/waren/fu0010/fu0010+b.jpg" class="popup" data-item="fu0010+b.jpg">
                              <img src="../images/waren/fu0010/tn_fu0010+b.jpg"
                                  alt="Futterhaus" class="verk_foto">
                                    </a>
                          </div>
      Das data-item ist eine einmalige, eindeutige Bezeichnung, genau die gleiche wie im unteren Beispiel die ID="".
      HTML-Code:
      <div id="modal">
      <ul>
      
                  <li id="fu0010+a.jpg" class="largeImage"><img src="../images/waren/fu0010/tn_fu0010+a.jpg" id="modalImage"></li>
      
      
                  <li id="fu0010+b.jpg" class="largeImage"><img src="../images/waren/fu0010/tn_fu0010+b.jpg" id="modalImage"></li>
      
      
                  <li id="fu0010+c.jpg" class="largeImage"><img src="../images/waren/fu0010/tn_fu0010+c.jpg" id="modalImage"></li>
      
      
                  <li id="fu0010+d.jpg" class="largeImage"><img src="../images/waren/fu0010/tn_fu0010+d.jpg" id="modalImage"></li>
      
      </ul>
      </div>
      Jetzt will ich das item ansprechen um es animieren zu können. Erst mal wird es in eine Variable gespeichert.
      Code:
      var item = $(this).data("item");
      wie kann ich jetzt aber die entsprechende ID ansprechen?
      Code:
      $('???').animate({"opacity": ".70"}, 500);

      Kommentar


      • #48
        Du verwendest das id-Attribut doppelt und davon abgesehen darf eine ID nicht mehr als einmal verwendet werden.

        Kommentar


        • #49
          Ich weiß, mit den doppelten ID's hab ich im ganzen Text noch ein paar mehr "Probleme". Aber da ich den jetzt immer wieder etwas umschreibe, lasse ich es fürs Erste und passe dass dann zum Schluss richtig an, wenn alles funktoniert. Sonst mache ich das doppelt und dreifach und baue mir versehetlich noch Fehler ein.

          Kommentar


          • #50
            Wenn du es jetzt nicht richtig machst wird es auch nicht funktionieren. Wie hellbringer schon sagt, du hast auf Deiner Seite 2 Elemente mit derselben ID, wie soll der JS-Interpreter wissen welches er ansprechen soll?

            Kommentar


            • #51
              genau deswegen frage ich ja nach der Schreibweise. Die <li id="... wird durch die vorhandenen Dateinamen erzeugt, ist also Einmalig. Je nachdem ich ich das Script dann weiter schreibe, könnte ich so auch die jetzige modalImage-ID ändern, oder dann auch einfach in eine Klasse umwandelt und mit der ersten ID separieren. Aber dazu muss ich wissen, wie ich eine variable ID im Sricpt aufrufen kann.

              Kommentar


              • #52
                HTML-Code:
                  <div id="fu0010+b.jpg" class="test">    <li id="fu0010+b.jpg" class="largeImage">
                Ich weiss nicht ob ich Dich ganz richtig verstehe, aber die id gilt für die ganze Seite, nicht nur für ein bestimmtes Element.

                Das Ansprechen eines Elements, z.b.
                HTML-Code:
                $(xy).val()
                ist ganz simpel. xy ist ein String, d.h. du kannst Dir den selbst zusammenbauen wie du möchtest. Also z.b.


                HTML-Code:
                var xy = '#' + id + '_image';
                console.log($(xy).val());

                Kommentar


                • #53
                  Irgendwie klappt es nicht. Ich verstehe aber auch den Sinn von val() in diesem Zusammenhang nicht so richtig.
                  Code:
                  $(document).ready(function(){
                    $('.popup').click (function(event) {  
                      event.preventDefault();    
                      var url = $(this).attr('href');
                      var item = $(this).data("item");
                      var id = '#' + item;
                      console.log($(id).val());    
                  
                      $('#modalImage').attr('src', url);  
                      $('#modal, #modal ul').animate({"opacity": "1"}, 500);  
                      $('#backDrop').animate({"opacity": ".70"}, 500);
                      $("#backDrop, #modal").css("display", "block");
                  
                      if($('.largeImage').attr('id') == item){
                          $(id).val().animate({"opacity": "1"}, 500);
                  
                      }
                  
                  
                      function closeBox(){
                          $("#backDrop, #modal").animate({"opacity": "0"}, 500, function(){
                          $("#backDrop, #modal").css("display", "none");
                          })};     
                  })});
                  Fehlermeldung:
                  Code:
                  undefined lightbox2.js:7:5
                  [Mitteilungsdetails anzeigen/ausblenden] TypeError: $(...).val(...) is undefined[Weitere Informationen]

                  Kommentar


                  • #54
                    .val() war nur ein Beispiel einer jQuery-Funktion um zu demonstrieren wie du einen Selector verwendest. Das brauchst du natürlich nicht.

                    Kommentar


                    • #55
                      Okay, verstehe . Klappt aber dennoch nicht. Laut Log ist die Variable id immer noch undefiniert, also irgendwas habe ich da falsch gemacht.

                      Ups, hatte bei der Console den val() noch nicht rausgenommen. Jetzt heißt es aber:
                      Code:
                      Object { length: 0, prevObject: Object(1) }

                      Kommentar


                      • #56
                        Dann findet er das Element nicht.
                        Was sagt denn:
                        HTML-Code:
                        console.log(id);
                        ?

                        Kommentar


                        • #57
                          Der gibt den richtigen Wert aus #fu0010+b.jpg. Demnach muss der Fehler irgendwo in der if-Abfrage sein.
                          HTML-Code:
                          <div class="verk_fenster">
                              <div class="verkauf_bild">    
                          
                          
                          
                                              <div id="fu0010+a.jpg" class="test">     
                                                <a href="../images/waren/fu0010/fu0010+a.jpg" class="popup" data-item="fu0010+a.jpg">
                                                  <img src="../images/waren/fu0010/tn_fu0010+a.jpg"
                                                      alt="Futterhaus" class="verk_foto">
                                                        </a>
                                              </div>
                          
                          
                                              <div id="fu0010+b.jpg" class="test">     
                                                <a href="../images/waren/fu0010/fu0010+b.jpg" class="popup" data-item="fu0010+b.jpg">
                                                  <img src="../images/waren/fu0010/tn_fu0010+b.jpg"
                                                      alt="Futterhaus" class="verk_foto">
                                                        </a>
                                              </div>
                          
                          
                                              <div id="fu0010+c.jpg" class="test">     
                                                <a href="../images/waren/fu0010/fu0010+c.jpg" class="popup" data-item="fu0010+c.jpg">
                                                  <img src="../images/waren/fu0010/tn_fu0010+c.jpg"
                                                      alt="Futterhaus" class="verk_foto">
                                                        </a>
                                              </div>
                          
                          
                                              <div id="fu0010+d.jpg" class="test">     
                                                <a href="../images/waren/fu0010/fu0010+d.jpg" class="popup" data-item="fu0010+d.jpg">
                                                  <img src="../images/waren/fu0010/tn_fu0010+d.jpg"
                                                      alt="Futterhaus" class="verk_foto">
                                                        </a>
                                              </div>
                          
                          
                          
                          
                          
                          
                          
                          
                          
                          
                          <div id="backDrop"></div>
                          
                          <div id="modal">
                          <ul>
                          
                                      <li id="fu0010+a.jpg" class="largeImage"><img src="../images/waren/fu0010/tn_fu0010+a.jpg" id="modalImage"></li>
                          
                          
                                      <li id="fu0010+b.jpg" class="largeImage"><img src="../images/waren/fu0010/tn_fu0010+b.jpg" id="modalImage"></li>
                          
                          
                                      <li id="fu0010+c.jpg" class="largeImage"><img src="../images/waren/fu0010/tn_fu0010+c.jpg" id="modalImage"></li>
                          
                          
                                      <li id="fu0010+d.jpg" class="largeImage"><img src="../images/waren/fu0010/tn_fu0010+d.jpg" id="modalImage"></li>
                          
                          </ul>
                          </div>
                          Bis zum <ul> wird alles eingeblendet, ab <li... bleibt es ausgebendet.

                          Kommentar


                          • #58
                            Du hast immer noch Elemente mit derselben id.

                            Edit:
                            Ausserdem:
                            Weshalb hast du dort überhaupt die Liste? Die macht doch keinen Sinn?
                            Mit
                            HTML-Code:
                            $('.irgendwas')
                            greifst du nur auf das erste Element mit der bestimmten Klasse zu. Wenn du alle durchgehen willst musst du das anders machen, z.b. so:
                            https://stackoverflow.com/questions/...ge-their-style

                            Und, bei folgendem Vergleich:
                            HTML-Code:
                              if($('.largeImage').attr('id') == item)
                            vergleichst du 'id' mit '#id', was logischerweise false ergibt.
                            Du scheinst immer noch Sachen zu versuchen, die du im Grundsatz eigentlich gar nicht verstanden hast, nicht?

                            Kommentar


                            • #59
                              Bitte lasse dein HTML validieren und beheb mal die Fehler. Dann komm wieder. https://validator.w3.org/
                              The string "()()" is not palindrom but the String "())(" is.

                              Debugging: Finde DEINE Fehler selbst! | Gegen Probleme beim E-Mail-Versand | Sicheres Passwort-Hashing | Includes niemals ohne __DIR__
                              PHP.de Wissenssammlung | Kein Support per PN

                              Kommentar


                              • #60
                                Okay, mein Fehler, habs vergessen. Ja, Ihr hattet recht . Aber das war nicht das Problem. Es liegt eher am CSS.
                                HTML-Code:
                                  <li id="fu0010+a.jpg" class="largeImage"><img src="../images/waren/fu0010/tn_fu0010+a.jpg" id="modalImage"></li>
                                .largeImage hat ursprünglich ein "opacity" von 0. Also kann ich es mit der ID alleine nicht einblenden. Ich muss jetzt irgendwie NUR die Klasse "largeImage" der richtigen ID ansprechen... ???

                                Kommentar

                                Lädt...
                                X