Ja ich weiß. Diese Angaben die ich meine sind seeeehr wage bzw schlecht erklärt. Klick mal diese Webseite an und geh dann auf Bilder. Dort kann man das sehen was ich meine. Wenn man die einzelnen Boxen anklickt. https://www.luftbilder-innviertel.at/index.php/bilder
Hilfe beim Einfügen eines Headerbildes
-
-
Das habe ich schon vermutet. Was Du suchst, nennt sich "Lightbox". Davon gibt es viele und IMO die beste ist die aktuelle Version von Fancybox:
-
Ach ja. So heißt das. Hab's eh schon mal gehört und auch gesehen. Ist nur schon sehr lange her.
-
Hallo Leute.
Jetzt hab ich das mal versucht mit der Lightbox in der HTML. Funktioniert auch soweit, Nur wie bekomme ich die jeweiligen Bilder in in eine Box rein bzw. wie bekomme ich die Pfeile rechts/links beim Anklicken auf den Bildern hin?
Hier ist mal der html-Code.
HTML
Alles anzeigen<!doctype html> <html> <head> <meta charset="utf-8"> <title>Unbenanntes Dokument</title> <link rel="stylesheet" href="css/lightbox.min.css"> </head> <body> <a href="Bilder/1-groß.jpg" rel="lightbox[land]" title="Land 1"> <img src="Bilder klein/1.jpg" alt="Bild1" width="133" height="200"> </a> <a href="Bilder/2-groß.jpg" rel="lightbox[land]" title="Land 2"> <img src="Bilder klein/2.jpg" alt="Bild2" width="200" height="133"> </a> <a href="Bilder/3-groß.jpg" rel="lightbox[land]" title="Land 3"> <img src="Bilder klein/3.jpg" alt="Bild3" width="200" height="133"> </a> <a href="Bilder/4-groß.jpg" rel="lightbox[land]" title="Land 4"> <img src="Bilder klein/4.jpg" alt="Bild4" width="200" height="133"> </a> <script src="js/lightbox-plus-jquery.min.js"></script> <div id="lightboxOverlay" class="lightboxOverlay" style="width: 1680px; height: 917px; display: none;"></div> </body> </html>
-
Zitat
Nur wie bekomme ich die jeweiligen Bilder in in eine Box rein bzw. wie bekomme ich die Pfeile rechts/links beim Anklicken auf den Bildern hin?
Das steht in der Doku von LightBox
-
Das steht in der Doku von LightBox
Wo ist die Doku zu finden?
-
-
Nein ist es nicht. Die von dir gepostete Seite hab ich schon gefunden. Das mit den Pfeilen (rechts/links) hab ich hinbekommen.
Nur das mit den Bildern in einer Box krieg ich nicht hin. Also zum leichteren Verständnis: ein Rahmen --> drinnen die Bilder übereinander (man kann nur ein Vorschaubild sehen) --> beim Anklicken des Rahmens kommen dann alle Bilder und dann kann man die Pix anklicken und mit den vorwärts Tasten durchblättern.
-
Jetzt verstehe ich nicht genau, was Du haben willst: Nur ein Thumbnail und wenn man drauf klickt, sollen alle sichtbar werden? Und wenn man dann auf eines klickt, soll sich die Lightbox öffnen? Oder so wie in deinem ersten Post: Unten im Lightbox-Fenster eine Reihe von Thumbnails, die man mit Pfeiltasten durchblättern kann und wenn man eines klickt, wird es in dem Fenster darüber groß angezeigt?
-
Ich würde denken das er das so in der art meint
-
Hallo Leute.
Sorry Leute, aber ich habe mich da komplett geirrt. Es ist schon das mit der lightbox. Ich habe es schon hinbekommen, aber ein Problem ist da immer noch. Die Bilder sind schön zentriert, aber wenn ich die Seite verkleinere bleiben die Bilder immer noch in einer Reihe, ohne dass sie nach unten rutschen. Irgendwo fehlt da noch was.
Hier der html-Code:
HTML
Alles anzeigen<!DOCTYPE html> <html lang="de"> <head> <title>BIRD VIEW Foto & Film</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css" type="text/css"> <link rel="stylesheet" href="css/lightbox.min.css"> <link href="css/lightbox.css" rel="stylesheet"> </head> <body> <div class="topnav" id="myTopnav"> <a href="#home" class="active">Home</a> <a href="#über mich">Über mich</a> <a href="#fotos">Fotos</a> <a href="#panoramen">Panoramen</a> <a href="#videos">Videos</a> <a href="#contact">Kontakt</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div> <div style="padding-left:16px"></div> <div class="Headerbild"><img src="images/Headerbild.png" alt="Bild"></div> <div class="flex"> <a href="Bilder/1-groß.jpg" rel="lightbox[land]" title="Land 1"> <img src="Bilder klein/1.jpg" alt="Bild1" width="100" height="100"> </a> <div class="flex"> <a href="Bilder/2-groß.jpg" rel="lightbox[land]" title="Land 2"> <img src="Bilder klein/2.jpg" alt="Bild2" width="100" height="100"> </a> <div class="flex"> <a href="Bilder/3-groß.jpg" rel="lightbox[land]" title="Land 3"> <img src="Bilder klein/3.jpg" alt="Bild3" width="100" height="100"> </a> <div class="flex"> <a href="Bilder/4-groß.jpg" rel="lightbox[land]" title="Land 4"> <img src="Bilder klein/4.jpg" alt="Bild4" width="100" height="100"> </a> <div class="flex"> <a href="Bilder/5-groß.jpg" rel="lightbox[land]" title="Land 5"> <img src="Bilder klein/5.jpg" alt="Bild5" width="100" height="100"> </a> <div class="flex"> <a href="Bilder/6-groß.jpg" rel="lightbox[land]" title="Land 6"> <img src="Bilder klein/6.jpg" alt="Bild6" width="100" height="100"> </a> <div class="flex"> <a href="Bilder/7.jpg" rel="lightbox[land]" title="Land 7"> <img src="Bilder klein/7.jpg" alt="Bild7" width="100" height="100"> </a> <div class="flex"> <a href="Bilder/8.jpg" rel="lightbox[land]" title="Land 8"> <img src="Bilder klein/8.jpg" alt="Bild8" width="100" height="100"> </a> <div class="flex"> <a href="Bilder/9.jpg" rel="lightbox[land]" title="Land 9"> <img src="Bilder klein/9.jpg" alt="Bild9" width="100" height="100"> </a> <div class="flex"> <a href="Bilder/10.jpg" rel="lightbox[land]" title="Land 10"> <img src="Bilder klein/10.jpg" alt="Bild10" width="100" height="100"> </a> <div class="flex"> <a href="Bilder/11.jpg" rel="lightbox[land]" title="Land 11"> <img src="Bilder klein/11.jpg" alt="Bild11" width="100" height="100"> </a> <div class="flex"> <a href="Bilder/12.jpg" rel="lightbox[land]" title="Land 12"> <img src="Bilder klein/12.jpg" alt="Bild12" width="100" height="100"> </a> <div class="flex"> <a href="Bilder/13.jpg" rel="lightbox[land]" title="Land 13"> <img src="Bilder klein/13.jpg" alt="Bild13" width="100" height="100"> </a> <div class="flex"> <a href="Bilder/14.jpg" rel="lightbox[land]" title="Land 14"> <img src="Bilder klein/14.jpg" alt="Bild14" width="100" height="100"> </a> <div class="flex"> <a href="Bilder/15.jpg" rel="lightbox[land]" title="Land 15"> <img src="Bilder klein/15.jpg" alt="Bild15" width="100" height="100"> </a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> <script src="js/lightbox-plus-jquery.js"></script> </body> </html>
und hier das CSS:
Code
Alles anzeigen.topnav{ background-color:lightslategrey; overflow: hidden; margin: 0 auto; width: 90%; max-width: 1080px; margin-top: 20px; border-radius: 10px; } /* Headerbild-Anfang */ .Headerbild{ margin: 0 auto; width: 90%; max-width: 1080px; margin-top: 15px; margin-bottom: 15px; } .Headerbild img{ width: 100%; border-radius: 10px; /* Headerbild-Ende */ } .topnav a{ float: left; display: block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover{ background-color: #ddd; color: black; } .topnav a.active{ background-color: #4CAF50; color: white; } .topnav .icon{ display: none; } * { margin: 0; padding: 0; } @media screen and (max-width: 1080px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 1080px) { .topnav.responsive {position: relative;} .topnav.responsive a.icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } } /* Bilder-Anfang */ .flex{ display: flex; justify-content: center; align-items:center; margin: 5px; }
-
Dann kuck dir doch mal Flexbox an. Damit ist das alles kein problem.
Dann zusätzlich noch @mediaqueries und du kannst das alles auf verschiedene Endgeräte ( Handy ,Laptop und co ) anpassen
http://www.css-wiki.com/listings/flexbox.html
EDIT:
Sehe gerade das du deine schließende divs alle unten hast, setze die mal da hin wo sie hingehöhren ,weil so geht das auch mit Flexbox nicht richtig
-
Hallo.
ich habe das mit der Flexbox jetzt mal ausprobiert. Funktioniert soweit. Würde einer von euch meine html und css kontrollieren? ich hoffe das passt so.
HTML
Alles anzeigen<!DOCTYPE html> <html lang="de"> <head> <title>BIRD VIEW Foto & Film</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css" type="text/css"> <link rel="stylesheet" href="css/lightbox.min.css"> <link href="css/lightbox.css" rel="stylesheet"> </head> <body> <div class="topnav" id="myTopnav"> <a href="#home" class="active">Home</a> <a href="#über mich">Über mich</a> <a href="#fotos">Fotos</a> <a href="#panoramen">Panoramen</a> <a href="#videos">Videos</a> <a href="#contact">Kontakt</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div> <div style="padding-left:16px"></div> <div class="Headerbild"><img src="images/Headerbild.png" alt="Bild"></div> <div class="row"> <div class="Bild"> <a href="Bilder/1.jpg" rel="lightbox[bild]" title="Bild 1"> <img src="Bilder klein/1.jpg" alt="Bild1" width="100" height="100"> </a> </div> <div class="Bild"> <a href="Bilder/2.jpg" rel="lightbox[bild]" title="Bild 2"> <img src="Bilder klein/2.jpg" alt="Bild2" width="100" height="100"> </a> </div> <div class="Bild"> <a href="Bilder/3.jpg" rel="lightbox[bild]" title="Bild 3"> <img src="Bilder klein/3.jpg" alt="Bild3" width="100" height="100"> </a> </div> <div class="Bild"> <a href="Bilder/4.jpg" rel="lightbox[bild]" title="Bild 4"> <img src="Bilder klein/4.jpg" alt="Bild4" width="100" height="100"> </a> </div> <div class="Bild"> <a href="Bilder/5.jpg" rel="lightbox[bild]" title="Bild 5"> <img src="Bilder klein/5.jpg" alt="Bild5" width="100" height="100"> </a> </div> <div class="Bild"> <a href="Bilder/6.jpg" rel="lightbox[bild]" title="Bild 6"> <img src="Bilder klein/6.jpg" alt="Bild6" width="100" height="100"> </a> </div> <div class="Bild"> <a href="Bilder/7.jpg" rel="lightbox[bild]" title="Bild 7"> <img src="Bilder klein/7.jpg" alt="Bild7" width="100" height="100"> </a> </div> <div class="Bild"> <a href="Bilder/8.jpg" rel="lightbox[bild]" title="Bild 8"> <img src="Bilder klein/8.jpg" alt="Bild8" width="100" height="100"> </a> </div> <div class="Bild"> <a href="Bilder/9.jpg" rel="lightbox[bild]" title="Bild 9"> <img src="Bilder klein/9.jpg" alt="Bild9" width="100" height="100"> </a> </div> <div class="Bild"> <a href="Bilder/10.jpg" rel="lightbox[bild]" title="Bild 10"> <img src="Bilder klein/10.jpg" alt="Bild10" width="100" height="100"> </a> </div> <div class="Bild"> <a href="Bilder/11.jpg" rel="lightbox[bild]" title="Bild 11"> <img src="Bilder klein/11.jpg" alt="Bild11" width="100" height="100"> </a> </div> <div class="Bild"> <a href="Bilder/12.jpg" rel="lightbox[bild]" title="Bild 12"> <img src="Bilder klein/12.jpg" alt="Bild12" width="100" height="100"> </a> </div> <div class="Bild"> <a href="Bilder/13.jpg" rel="lightbox[bild]" title="Bild 13"> <img src="Bilder klein/13.jpg" alt="Bild13" width="100" height="100"> </a> </div> <div class="Bild"> <a href="Bilder/14.jpg" rel="lightbox[bild]" title="Bild 14"> <img src="Bilder klein/14.jpg" alt="Bild14" width="100" height="100"> </a> </div> <div class="Bild"> <a href="Bilder/15.jpg" rel="lightbox[bild]" title="Bild 15"> <img src="Bilder klein/15.jpg" alt="Bild15" width="100" height="100"> </a> </div> </div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> <script src="js/lightbox-plus-jquery.js"></script> </body> </html>
Code
Alles anzeigen.topnav{ background-color:lightslategrey; overflow: hidden; margin: 0 auto; width: 90%; max-width: 1080px; margin-top: 20px; border-radius: 10px; } /* Headerbild-Anfang */ .Headerbild{ margin: 0 auto; width: 90%; max-width: 1080px; margin-top: 15px; margin-bottom: 15px; } .Headerbild img{ width: 100%; border-radius: 10px; /* Headerbild-Ende */ } .topnav a{ float: left; display: block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover{ background-color: #ddd; color: black; } .topnav a.active{ background-color: #4CAF50; color: white; } .topnav .icon{ display: none; } * { margin: 0; padding: 0; } @media screen and (max-width: 1080px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 1080px) { .topnav.responsive {position: relative;} .topnav.responsive a.icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } } /* Bilder-Anfang */ .Bild{ display: inline-block; height: 100px; width: 100px; margin: 6px; padding: 5px; } .bild{ text-align: center; margin: 6px; padding: 0; }
-
Kopiere den HTML-Code mal hier rein: https://validator.w3.org/#validate_by_input
-
Kopiere den HTML-Code mal hier rein: https://validator.w3.org/#validate_by_input
Hab das mal kontrolliert. Fehler erkannt - Fehler behoben und jetzt passt alles.
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!