Hilfe beim Einfügen eines Headerbildes

Michael53

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

Sempervivum

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:

https://fancyapps.com/fancybox/3/

Michael53

Ach ja. So heißt das. Hab's eh schon mal gehört und auch gesehen. Ist nur schon sehr lange her.

Michael53

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

<!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>

Alles anzeigen

m.scatello

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

Michael53

Zitat von m.scatello

Das steht in der Doku von LightBox

Wo ist die Doku zu finden?

m.scatello

Ist dein google kaputt?

https://lokeshdhakar.com/projects/lightbox2

Michael53

Zitat von m.scatello

Ist dein google kaputt?

https://lokeshdhakar.com/projects/lightbox2

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.

Sempervivum

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?

basti1012

Ich würde denken das er das so in der art meint

https://codepen.io/arkev/pen/oqhLf

Michael53

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

<!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>

Alles anzeigen

und hier das CSS:

Code

.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;
}

Alles anzeigen

basti1012

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

Michael53

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

<!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>

Alles anzeigen

Code

.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;
}

Alles anzeigen

m.scatello

Kopiere den HTML-Code mal hier rein: https://validator.w3.org/#validate_by_input

Michael53

Zitat von m.scatello

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!