Ankündigung

Einklappen
Keine Ankündigung bisher.

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

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

  • #31
    Zitat von rabab Beitrag anzeigen
    Ich will das gar nicht vermischen. Nur wenn ich den Lightbox-Container in die while-Schleife stecke, funktioniert die Animation nicht, wenn ich ihn rausnehme, geht es. Dadurch habe ich ja erst gemerkt, dass es da einen Zusammenhang gibt. Ansonsten bin ich ganz dafür, das zu trennen.
    Dann gib ihn nicht in die while-Schleife.

    Kommentar


    • #32
      Mhhh, ich denke schon. Ich muss der ID eine einzigartige Bezeichnung zuweisen. In meinem Beispiel also etwa so:
      Code:
      <div id="bild<?php echo $ArtNr?>">
      Aber ich komme damit irgendwie nicht auf den Zusammenhang mit $(this). Das das richtig ist, verstehe ich schon...
      Ich habe viele Beispiele gefunden mit einer Navigation. Da wird dann die Schaltfläche, welche gerade überfahren oder angeklickt wird, ein anderer Style zugewiesen. Soweit ist mir das klar.
      HTML-Code:
          <div class="ziel">
          <a href="#" class="verk_foto"><img src="../images/waren/fu0010/tn_fu0010+d.jpg"></a>      
       <div class="backDrop"></div>  
       <div class="box">     <div class="close"></div>    
      <img class="largeImage" src="../images/waren/fu0010/fu0010+a.jpg"/>  
      </div>
      Aber ich klicke jetzt in diesem Beispiel auf .verk_foto, will aber .backDrop und .box ansprechen. Also eben nicht .this.

      Kommentar


      • #33
        Zitat von hellbringer Beitrag anzeigen

        Dann gib ihn nicht in die while-Schleife.
        Da habe ich ja wieder das Problem, dass ich die einzelnen Bilder, die mit der Schleife ausgegben werden, nicht ansprechen kann, wenn ich die Box aus der Schleife nehme.

        Kommentar


        • #34
          Zitat von rabab Beitrag anzeigen
          Da habe ich ja wieder das Problem, dass ich die einzelnen Bilder, die mit der Schleife ausgegben werden, nicht ansprechen kann, wenn ich die Box aus der Schleife nehme.
          Dann gib sie als Links aus und nicht als Lightbox. Die brauchst du ja sowieso für Browser, die kein JavaScript aktiv haben.

          Die Lightbox baust du dann clientseitig mit JavaScript auf. PHP hat damit nichts zu tun.

          Kommentar


          • #35
            Auf die Gefahr hin, wieder den gleichen Fehler gemacht zu haben... aber ich denke eigentlich nicht.
            HTML-Code:
             <div id="tn_fu0010+a.jpg">  
             <a href="../images/waren/fu0010/fu0010+a.jpg" class="popup">    
            <img src="../images/waren/fu0010/tn_fu0010+a.jpg"    alt="Futterhaus" class="verk_foto">
            </a>
            </div>    
             <div id="tn_fu0010+b.jpg">    
            <a href="../images/waren/fu0010/fu0010+a.jpg" class="popup">    
            <img src="../images/waren/fu0010/tn_fu0010+b.jpg"    alt="Futterhaus" class="verk_foto">
            </a>
            </div>      
            <div id="tn_fu0010+c.jpg">    
            <a href="../images/waren/fu0010/fu0010+a.jpg" class="popup">    
            <img src="../images/waren/fu0010/tn_fu0010+c.jpg"    alt="Futterhaus" class="verk_foto">
            </a>
            </div>      
            <div id="tn_fu0010+d.jpg">    
            <a href="../images/waren/fu0010/fu0010+a.jpg" class="popup">    
            <img src="../images/waren/fu0010/tn_fu0010+d.jpg"    alt="Futterhaus" class="verk_foto">
            </a>
            </div>
            Code:
            $(document).ready(function(){
            $('.popup').click (function(event) {
               $(this).parent().prepend('<img src="' + $(this).attr('href') + '" id="popped" />');
               event.preventDefault();
            
               $('img#popped').click(function() {
                  $(this).remove();
               });
            })});
            Problem ist, es funktioniert wieder nicht, wobei ich dieses mal, denke ich, nur die Links übergebe. Auf einer einfachen Testseite ohne PHP geht es.

            Kommentar


            • #36
              PHP hat damit nichts zu tun. Was zählt ist der HTML-Code, der im Browser landet. Nachdem der gezeigte unvollständig ist, kann man nicht wirklich was dazu sagen.

              Kommentar


              • #37
                Hier mal zwei Schleifendruchläufe in HTML. Den Kopf und Header habe ich weggelassen, der sollte ja keine Rolle spielen.
                HTML-Code:
                <div id="container">
                
                <div class="verk_fenster">
                    <div class="verkauf_bild">    
                
                
                
                
                                     <div id="tn_fu0010+a.jpg">
                                    <a href="../images/waren/fu0010/fu0010+a.jpg" class="popup">
                                    <img src="../images/waren/fu0010/tn_fu0010+a.jpg"
                                    alt="Futterhaus" class="verk_foto"></a></div>
                
                                     <div id="tn_fu0010+b.jpg">
                                    <a href="../images/waren/fu0010/fu0010+a.jpg" class="popup">
                                    <img src="../images/waren/fu0010/tn_fu0010+b.jpg"
                                    alt="Futterhaus" class="verk_foto"></a></div>
                
                                     <div id="tn_fu0010+c.jpg">
                                    <a href="../images/waren/fu0010/fu0010+a.jpg" class="popup">
                                    <img src="../images/waren/fu0010/tn_fu0010+c.jpg"
                                    alt="Futterhaus" class="verk_foto"></a></div>
                
                                     <div id="tn_fu0010+d.jpg">
                                    <a href="../images/waren/fu0010/fu0010+a.jpg" class="popup">
                                    <img src="../images/waren/fu0010/tn_fu0010+d.jpg"
                                    alt="Futterhaus" class="verk_foto"></a></div>
                
                
                
                
                
                </div>
                
                            <div class="verk_zeile_rechts">
                                <div class="verk_titel">
                                    <h1>Futterhaus</h1>
                                    <div class="verk_material">
                                        <div class="bold">Material:&nbsp;</div> Holz, Acrylfarbe, Dachpappe</div>
                                    <div class="verk_masse">
                                        <div class="bold">Abmessungen (B x T x H):&nbsp;</div> ca. 36x31x22</div>
                                    <div class="bold">Artikelnummer:&nbsp;</div> fu0010                <div class="verk_preis">
                                        <div class="bold">Preis:&nbsp;</div>
                                        <div class="verk_evp">75.00 Euro</div>
                                    </div>
                                    <div class="verk_VK">
                                        <div class="bold">zzgl. Versandkosten:&nbsp;</div>
                                        10,00 Euro
                                    </div>
                
                                </div>
                                <div class="verk_kaufen">
                
                                    <div class="verk_wagen">In den Einkaufswagen</div>
                                </div>
                
                                <div class="verk_text">
                        Diese Form bei Futterh�usern wurde von mir entwickelt, damit ich mehr M�glichkeiten habe, Fl�chen farbig zu gestalten, und auch die vielen kleinen aber sehr auff�lligen Details einbringen zu k�nnen. Bei den gro�en Futterh�usern dieser Art hat das Dach von mir eine deutliche W�lbung bekommen, was die Rundlichkeit in der Gesamtheit noch einmal hervorhebt.                </div>
                
                
                            </div>
                
                        </div>
                
                    <!-- verk_fenster -->
                
                
                
                
                <div class="verk_fenster">
                    <div class="verkauf_bild">    
                
                
                
                
                                     <div id="tn_fu0011+a.jpg">
                                    <a href="../images/waren/fu0011/fu0011+a.jpg" class="popup">
                                    <img src="../images/waren/fu0011/tn_fu0011+a.jpg"
                                    alt="Futterhaus" class="verk_foto"></a></div>
                
                                     <div id="tn_fu0011+b.jpg">
                                    <a href="../images/waren/fu0011/fu0011+a.jpg" class="popup">
                                    <img src="../images/waren/fu0011/tn_fu0011+b.jpg"
                                    alt="Futterhaus" class="verk_foto"></a></div>
                
                                     <div id="tn_fu0011+c.jpg">
                                    <a href="../images/waren/fu0011/fu0011+a.jpg" class="popup">
                                    <img src="../images/waren/fu0011/tn_fu0011+c.jpg"
                                    alt="Futterhaus" class="verk_foto"></a></div>
                
                
                
                
                
                
                </div>
                
                            <div class="verk_zeile_rechts">
                                <div class="verk_titel">
                                    <h1>Futterhaus</h1>
                                    <div class="verk_material">
                                        <div class="bold">Material:&nbsp;</div> Holz, Acrylfarbe, Dachpappe</div>
                                    <div class="verk_masse">
                                        <div class="bold">Abmessungen (B x T x H):&nbsp;</div> ca. 47x27x23</div>
                                    <div class="bold">Artikelnummer:&nbsp;</div> fu0011                <div class="verk_preis">
                                        <div class="bold">Preis:&nbsp;</div>
                                        <div class="verk_evp">65.00 Euro</div>
                                    </div>
                                    <div class="verk_VK">
                                        <div class="bold">zzgl. Versandkosten:&nbsp;</div>
                                        10,00 Euro
                                    </div>
                
                                </div>
                                <div class="verk_kaufen">
                
                                    <div class="verk_wagen">In den Einkaufswagen</div>
                                </div>
                
                                <div class="verk_text">
                        Die klassische Hausform dieses Futterhauses ist uns allen nat�rlich sehr vertraut und deshalb ist es wohl auch so beliebt. Die V�gel haben hier die M�glichkeit, von allen Seiten hinein zu fliegen. Zus�tzlich habe ich noch Befestigungen angebracht, an denen Meisenkn�del, Meisenringe oder �pfel angeh�ngt werden k�nnen. Der Boden ist innen wie immer unlackiert, damit die V�gel nicht versehentlich Farbpartikel mit aufnehmen.                </div>
                
                
                            </div>
                
                        </div>
                
                    <!-- verk_fenster -->

                Kommentar


                • #38
                  So, jetzt könnt ihr mal über die Blödheit eines Anfängers lachen: Hab den Fehler gefunden - nach zwei Tagen. Ich habe die neue js-Datei nicht eingebunden. Nachdem ich das nun gemacht habe, funktioniert es erstaunlicher Weise...

                  Kommentar


                  • #39
                    Mhhh, nach vielem Lesen und Probieren stehe ich jetzt wieder ganz am Anfang. Das, was ich (im ersten Schritt) machen wollte funktioniert, aber ohne Animation. Wo liegt denn der Fehler?
                    HTML-Code:
                    <div id="container">
                    
                    <div class="verk_fenster">
                        <div class="verkauf_bild">    
                    
                    
                    
                    
                                         <div id="fu0010+a.jpg">
                                         <div class="largeImage"><img  src="../images/waren/fu0010/fu0010+a.jpg"/></div>
                                          <a href="#" class="popup">
                                            <img src="../images/waren/fu0010/tn_fu0010+a.jpg"
                                                alt="Futterhaus" class="verk_foto"></a>
                                        </div>
                    
                                         <div id="fu0010+b.jpg">
                                         <div class="largeImage"><img  src="../images/waren/fu0010/fu0010+b.jpg"/></div>
                                          <a href="#" class="popup">
                                            <img src="../images/waren/fu0010/tn_fu0010+b.jpg"
                                                alt="Futterhaus" class="verk_foto"></a>
                                        </div>
                    
                                         <div id="fu0010+c.jpg">
                                         <div class="largeImage"><img  src="../images/waren/fu0010/fu0010+c.jpg"/></div>
                                          <a href="#" class="popup">
                                            <img src="../images/waren/fu0010/tn_fu0010+c.jpg"
                                                alt="Futterhaus" class="verk_foto"></a>
                                        </div>
                    
                                         <div id="fu0010+d.jpg">
                                         <div class="largeImage"><img  src="../images/waren/fu0010/fu0010+d.jpg"/></div>
                                          <a href="#" class="popup">
                                            <img src="../images/waren/fu0010/tn_fu0010+d.jpg"
                                                alt="Futterhaus" class="verk_foto"></a>
                                        </div>
                    
                    
                    
                    
                    
                    </div>
                    
                                <div class="verk_zeile_rechts">
                                    <div class="verk_titel">
                                        <h1>Futterhaus</h1>
                                        <div class="verk_material">
                                            <div class="bold">Material:&nbsp;</div> Holz, Acrylfarbe, Dachpappe</div>
                                        <div class="verk_masse">
                                            <div class="bold">Abmessungen (B x T x H):&nbsp;</div> ca. 36x31x22</div>
                                        <div class="bold">Artikelnummer:&nbsp;</div> fu0010                <div class="verk_preis">
                                            <div class="bold">Preis:&nbsp;</div>
                                            <div class="verk_evp">75.00 Euro</div>
                                        </div>
                                        <div class="verk_VK">
                                            <div class="bold">zzgl. Versandkosten:&nbsp;</div>
                                            10,00 Euro
                                        </div>
                    
                                    </div>
                                    <div class="verk_kaufen">
                    
                                        <div class="verk_wagen">In den Einkaufswagen</div>
                                    </div>
                    
                                    <div class="verk_text">
                            Diese Form bei Futterh�usern wurde von mir entwickelt, damit ich mehr M�glichkeiten habe, Fl�chen farbig zu gestalten, und auch die vielen kleinen aber sehr auff�lligen Details einbringen zu k�nnen. Bei den gro�en Futterh�usern dieser Art hat das Dach von mir eine deutliche W�lbung bekommen, was die Rundlichkeit in der Gesamtheit noch einmal hervorhebt.                </div>
                    
                    
                                </div>
                    
                            </div>
                    
                        <!-- verk_fenster -->
                    
                    
                    
                    
                    <div class="verk_fenster">
                        <div class="verkauf_bild">    
                    
                    
                    
                    
                                         <div id="fu0011+a.jpg">
                                         <div class="largeImage"><img  src="../images/waren/fu0011/fu0011+a.jpg"/></div>
                                          <a href="#" class="popup">
                                            <img src="../images/waren/fu0011/tn_fu0011+a.jpg"
                                                alt="Futterhaus" class="verk_foto"></a>
                                        </div>
                    
                                         <div id="fu0011+b.jpg">
                                         <div class="largeImage"><img  src="../images/waren/fu0011/fu0011+b.jpg"/></div>
                                          <a href="#" class="popup">
                                            <img src="../images/waren/fu0011/tn_fu0011+b.jpg"
                                                alt="Futterhaus" class="verk_foto"></a>
                                        </div>
                    
                                         <div id="fu0011+c.jpg">
                                         <div class="largeImage"><img  src="../images/waren/fu0011/fu0011+c.jpg"/></div>
                                          <a href="#" class="popup">
                                            <img src="../images/waren/fu0011/tn_fu0011+c.jpg"
                                                alt="Futterhaus" class="verk_foto"></a>
                                        </div>
                    
                    
                    
                    
                    
                    
                    </div><div id="container">
                    
                    <div class="verk_fenster">
                        <div class="verkauf_bild">    
                    
                    
                    
                    
                                         <div id="fu0010+a.jpg">
                                         <div class="largeImage"><img  src="../images/waren/fu0010/fu0010+a.jpg"/></div>
                                          <a href="#" class="popup">
                                            <img src="../images/waren/fu0010/tn_fu0010+a.jpg"
                                                alt="Futterhaus" class="verk_foto"></a>
                                        </div>
                    
                                         <div id="fu0010+b.jpg">
                                         <div class="largeImage"><img  src="../images/waren/fu0010/fu0010+b.jpg"/></div>
                                          <a href="#" class="popup">
                                            <img src="../images/waren/fu0010/tn_fu0010+b.jpg"
                                                alt="Futterhaus" class="verk_foto"></a>
                                        </div>
                    
                                         <div id="fu0010+c.jpg">
                                         <div class="largeImage"><img  src="../images/waren/fu0010/fu0010+c.jpg"/></div>
                                          <a href="#" class="popup">
                                            <img src="../images/waren/fu0010/tn_fu0010+c.jpg"
                                                alt="Futterhaus" class="verk_foto"></a>
                                        </div>
                    
                                         <div id="fu0010+d.jpg">
                                         <div class="largeImage"><img  src="../images/waren/fu0010/fu0010+d.jpg"/></div>
                                          <a href="#" class="popup">
                                            <img src="../images/waren/fu0010/tn_fu0010+d.jpg"
                                                alt="Futterhaus" class="verk_foto"></a>
                                        </div>
                    
                    
                    
                    
                    
                    </div>
                    
                                <div class="verk_zeile_rechts">
                                    <div class="verk_titel">
                                        <h1>Futterhaus</h1>
                                        <div class="verk_material">
                                            <div class="bold">Material:&nbsp;</div> Holz, Acrylfarbe, Dachpappe</div>
                                        <div class="verk_masse">
                                            <div class="bold">Abmessungen (B x T x H):&nbsp;</div> ca. 36x31x22</div>
                                        <div class="bold">Artikelnummer:&nbsp;</div> fu0010                <div class="verk_preis">
                                            <div class="bold">Preis:&nbsp;</div>
                                            <div class="verk_evp">75.00 Euro</div>
                                        </div>
                                        <div class="verk_VK">
                                            <div class="bold">zzgl. Versandkosten:&nbsp;</div>
                                            10,00 Euro
                                        </div>
                    
                                    </div>
                                    <div class="verk_kaufen">
                    
                                        <div class="verk_wagen">In den Einkaufswagen</div>
                                    </div>
                    
                                    <div class="verk_text">
                            Diese Form bei Futterh�usern wurde von mir entwickelt, damit ich mehr M�glichkeiten habe, Fl�chen farbig zu gestalten, und auch die vielen kleinen aber sehr auff�lligen Details einbringen zu k�nnen. Bei den gro�en Futterh�usern dieser Art hat das Dach von mir eine deutliche W�lbung bekommen, was die Rundlichkeit in der Gesamtheit noch einmal hervorhebt.                </div>
                    
                    
                                </div>
                    
                            </div>
                    
                        <!-- verk_fenster -->
                    
                    
                    
                    
                    <div class="verk_fenster">
                        <div class="verkauf_bild">    
                    
                    
                    
                    
                                         <div id="fu0011+a.jpg">
                                         <div class="largeImage"><img  src="../images/waren/fu0011/fu0011+a.jpg"/></div>
                                          <a href="#" class="popup">
                                            <img src="../images/waren/fu0011/tn_fu0011+a.jpg"
                                                alt="Futterhaus" class="verk_foto"></a>
                                        </div>
                    
                                         <div id="fu0011+b.jpg">
                                         <div class="largeImage"><img  src="../images/waren/fu0011/fu0011+b.jpg"/></div>
                                          <a href="#" class="popup">
                                            <img src="../images/waren/fu0011/tn_fu0011+b.jpg"
                                                alt="Futterhaus" class="verk_foto"></a>
                                        </div>
                    
                                         <div id="fu0011+c.jpg">
                                         <div class="largeImage"><img  src="../images/waren/fu0011/fu0011+c.jpg"/></div>
                                          <a href="#" class="popup">
                                            <img src="../images/waren/fu0011/tn_fu0011+c.jpg"
                                                alt="Futterhaus" class="verk_foto"></a>
                                        </div>
                    
                    
                    
                    
                    
                    
                    </div>
                    Code:
                    $(document).ready(function(){
                    $('.popup').click (function(event) {
                       event.preventDefault();
                    
                       $(this).parent().children("div").addClass("largeImage_2", 1000, "fadeIn");
                       $(this).parent().children("div").removeClass("largeImage");    
                    
                    
                    
                    
                    
                       $('img#popped').click(function() {
                          $(this).remove();
                       });
                    })});
                    Der untere Teil des Scripts ist noch nicht angepasst, hab ihn nur der Vollständigkeit drin gelassen.

                    Code:
                    .largeImage{
                        display:none;
                    }
                    .largeImage_2{
                        display:block;
                    }

                    Kommentar


                    • #40
                      addClass nimmt nur einen Parameter, nicht 3.

                      https://api.jquery.com/addclass/

                      Kommentar


                      • #41
                        Hier steht es anders

                        Kommentar


                        • #42
                          Hast du denn jqueryui eingebunden? Man kann nicht helfen wenn immer nur ein Teil gepostet wird.

                          Kommentar


                          • #43
                            Zitat von jonas3344 Beitrag anzeigen
                            Hast du denn jqueryui eingebunden? Man kann nicht helfen wenn immer nur ein Teil gepostet wird.
                            Ja, dieses Mal habe ich dran gedacht Der Code ist ewig lang, durch die Schleife. Ich wollte hier nicht alles zumüllen.

                            HTML-Code:
                            <!doctype html>
                            <html lang="de">
                            
                            <head>
                            
                            <meta charset="utf-8">
                            <meta name="description"
                                content="" />
                            <meta name="keywords"
                                content="" />
                            
                            <title>Verkauf</title>
                            
                            <link href="https://fonts.googleapis.com/css?family=Marko+One"
                                rel="stylesheet" />
                            <link rel="stylesheet" type="text/css" href="../css/head.css" />
                            <link rel="stylesheet" type="text/css" href="../css/header.css" />
                            <link rel="stylesheet" type="text/css" href="../css/verkauf.css" />
                            <link rel="stylesheet" type="text/css" href="../lib/css/lightbox2.css" />
                            
                            
                            <script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
                            <script src="../js/header.js"></script>
                            <script src="../lib/js/lightbox2.js"></script>
                            
                            
                            
                            </head>
                            <body>

                            Kommentar


                            • #44
                              jQuery != jQueryUi

                              Du hast jquery eingebunden. jqueryui ist eine Erweiterung davon (deren Entwicklung seit längerem stockt).

                              http://jqueryui.com/

                              Kommentar


                              • #45
                                Okay, dann bin ich eben doch so blöd...
                                Ich dachte, Du hast Dich verschrieben, wusste nicht, dass es da noch ne Version gibt. Funktioniert übrigens damit auch nicht. Hier wird die Klasse merkwürdiger Weise gar nicht ausgetauscht sondern nur der CSS-Code der ursprünglichen eingefügt.
                                Ist aber auch egal, wenn jqueryui nicht gepflegt wird, mache ich es lieber richtig. Aber wie schreibe ich nun eine Animation dazu?

                                Kommentar

                                Lädt...
                                X