Zitat von rabab
Beitrag anzeigen
Ankündigung
Einklappen
Keine Ankündigung bisher.
Mit nem Anfänger Schritt für Schritt nen Slider bauen...
Einklappen
Neue Werbung 2019
Einklappen
X
-
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?>">
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>
Kommentar
-
Zitat von hellbringer Beitrag anzeigen
Dann gib ihn nicht in die while-Schleife.
Kommentar
-
Zitat von rabab Beitrag anzeigenDa 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.
Die Lightbox baust du dann clientseitig mit JavaScript auf. PHP hat damit nichts zu tun.
Kommentar
-
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(); }); })});
Kommentar
-
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: </div> Holz, Acrylfarbe, Dachpappe</div> <div class="verk_masse"> <div class="bold">Abmessungen (B x T x H): </div> ca. 36x31x22</div> <div class="bold">Artikelnummer: </div> fu0010 <div class="verk_preis"> <div class="bold">Preis: </div> <div class="verk_evp">75.00 Euro</div> </div> <div class="verk_VK"> <div class="bold">zzgl. Versandkosten: </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: </div> Holz, Acrylfarbe, Dachpappe</div> <div class="verk_masse"> <div class="bold">Abmessungen (B x T x H): </div> ca. 47x27x23</div> <div class="bold">Artikelnummer: </div> fu0011 <div class="verk_preis"> <div class="bold">Preis: </div> <div class="verk_evp">65.00 Euro</div> </div> <div class="verk_VK"> <div class="bold">zzgl. Versandkosten: </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
-
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: </div> Holz, Acrylfarbe, Dachpappe</div> <div class="verk_masse"> <div class="bold">Abmessungen (B x T x H): </div> ca. 36x31x22</div> <div class="bold">Artikelnummer: </div> fu0010 <div class="verk_preis"> <div class="bold">Preis: </div> <div class="verk_evp">75.00 Euro</div> </div> <div class="verk_VK"> <div class="bold">zzgl. Versandkosten: </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: </div> Holz, Acrylfarbe, Dachpappe</div> <div class="verk_masse"> <div class="bold">Abmessungen (B x T x H): </div> ca. 36x31x22</div> <div class="bold">Artikelnummer: </div> fu0010 <div class="verk_preis"> <div class="bold">Preis: </div> <div class="verk_evp">75.00 Euro</div> </div> <div class="verk_VK"> <div class="bold">zzgl. Versandkosten: </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(); }); })});
Code:.largeImage{ display:none; } .largeImage_2{ display:block; }
Kommentar
-
Zitat von jonas3344 Beitrag anzeigenHast du denn jqueryui eingebunden? Man kann nicht helfen wenn immer nur ein Teil gepostet wird.
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
-
jQuery != jQueryUi
Du hast jquery eingebunden. jqueryui ist eine Erweiterung davon (deren Entwicklung seit längerem stockt).
http://jqueryui.com/
Kommentar
-
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
Kommentar