• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] lightbox

Status
Für weitere Antworten geschlossen.
janosh

janosh

Neues Mitglied
guten abend. vielleicht kann mir jemand helfen. ich versuche mal, mein problem zu erläutern.

ich möchte, dass sich mein container mit der id "image_zoom" immer vertikal zentriert ausrichtet, egal, wie hoch das fenster ist. zudem möchte ich, dass sich das bild, welches in das img-tag geladen wird skaliert, sobald die höhe des fensters zu gering wird. vieleicht mag mir jemand dabei helfen.

HTML: 
<div id="lightbox">
 
  <img class="close_window" src="img/x.png">
 
  <div id="image_zoom">
 
  <h4>Kategorie</h4>
 
  <figure>
  <img src="" alt="">
  <figcaption>Bildunterschrift</figcaption>
 
  <div class="pre"></div>
  <div class="next"></div>
  </figure>
  </div>
 
  </div>
CSS: 
#lightbox {
   height:100vh;
  top:0;
  width:100%;
  background: #012733;
  position: fixed;
  z-index:1000;
  display: none;
}

.close_window{
  width: 23px;
  height: 23px;
  position: absolute;
  right:26px;
  top: 26px;
  cursor: pointer;
}

#image_zoom {
  margin: 0 auto;
  width:calc(100% - 40px);
  padding: 50px;
  position: relative;
}

#image_zoom h4{
  font-size:1.375rem;
   color: coral;
  border-bottom:1px solid coral;
  margin-bottom: 20px;
  padding-left: 0;
}

#image_zoom img{
   width:100%;
}

#image_zoom figcaption{
  text-transform: uppercase;
  margin-top: 10px;
  font-size:1.125rem;
  font-family: 'AvenirLTStd-Book';
  color: azure;
}

.pre{
  position: absolute;
  left:13px;
  top:50%;
  width: 17px;
  height: 30px;
  cursor: pointer;
  padding:10px;
  background-image:url(../img/pre.png);
  background-repeat: no-repeat;
}

.next{
  position: absolute;
  right:9px;
  top:50%;
  width: 1px;
  height: 30px;
  cursor: pointer;
  padding:10px;
  background-image:url(../img/next.png);
  background-repeat: no-repeat;
}
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
So?
Code: 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">

<style>
* { margin:0;padding:0;}
html,body { height:100vh;background:#012733;}


#lightbox {
width:100%;
height:100%;
text-align:center;
background: #012733;
}

#lightbox:before {
content:"";
display:inline-block;
vertical-align:middle;
height:100%;
}

#lightbox figure {
margin:auto;
display:inline-block;
vertical-align:middle;
width:70%;
position:relative;
}
#lightbox img {
 margin:auto;
width:100%;
display:block;
}

#lightbox .pre , #lightbox .next {
position: absolute;
top:50%;
width: 17px;
height: 30px;
cursor: pointer;
padding:10px;
}

#lightbox .next{right:-30px;}
#lightbox .pre{left:-30px;}

#lightbox figcaption{
text-transform: uppercase;
margin-top: 10px;
font-size:1.125rem;
font-family: 'AvenirLTStd-Book';
color: azure;
}

#lightbox h4{
font-size:1.375rem;
color: coral;
border-bottom:1px solid coral;
margin-bottom: 20px;
padding-left: 0;
}
</style>
<title></title>


</head>
<body>
<div id="lightbox">

<figure>
<h4>Kategorie</h4>
<img src="bild2.jpg" alt="">
<figcaption>Bildunterschrift</figcaption>
<div class="pre"><</div>
<div class="next">></div>
</figure>
</div>



</body>
</html>
 
vielen dank. leider gelingt es mir nicht, das auf meiner seite zum laufen zu kriegen. vielleicht magst du dir ja mal das große ganze anschauen: [Link auf Wunsch entfernt]

im moment greift die funktion nur bei den bildern unter der kategorie "bildbearbeitung". weil die anderen referenzen in einem figure sind, der relativ ist, funktioniert dort das skript noch nicht, glaub ich. wäre schön, wenn es für mein anliegen eine lösung gibt, ohne alles komplett umbauen zu müssen.
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
Hier der CSS-Teil
Code: 
* { margin:0;padding:0;}
html,body { height:100%;background:#012733;}

img.close_window{
width: 23px;
height: 23px;
position: absolute;
right:26px;
top: 26px;
cursor: pointer;

}

#lightbox {
 width:100%;
 height:100%;
 text-align:center;
 background: #012733;
}

#lightbox:before {
 content:"";
 display:inline-block;
 vertical-align:middle;
 height:100%;
}

#lightbox #image_zoom {
 margin:auto;
 display:inline-block;
 vertical-align:middle;
 width:70%; position:relative;
}

#lightbox #image_zoom  img {
 margin:auto;
 width:70%;
 display:block;
}

#lightbox #image_zoom .pre , #lightbox #image_zoom .next {
position: absolute;
top:50%;
width: 17px;
height: 30px;
cursor: pointer;
padding:10px;
color: coral;
}

#lightbox #image_zoom .next{right:0px;}
#lightbox #image_zoom .pre{left:0px;}

#lightbox #image_zoom  figcaption{
text-transform: uppercase;
margin-top: 10px;
font-size:1.125rem;
font-family: 'AvenirLTStd-Book';
color: azure;
}

#lightbox  h4{
font-size:1.375rem;
color: coral;
border-bottom:1px solid coral;
margin-bottom: 20px;
padding-left: 0;
}
 
danke...aber das macht alles nur noch schlimmer, wenn ich deine css durch meine austausche. ich stell mir das sicher auch zu einfach vor und es ist mit copy & paste nicht getan. ich möchte, dass meine lightbox genau so aussieht, wie momentan, wenn man auf ein bild der kategorie "bildbearbeitung" klickt. das einzige, was sich ändern soll, ist, dass sich alles vertikal zentriert (ohne das x) und sich das bild, welches in die lightbox geladen wird, skaliert, wenn es nicht mehr in das fenster passen würde. momentan ändert es seine größe nur, wenn die fensterbreite zu klein wird, so dass das bild reinpassen würde. das gleiche soll es tun, wenn die fensterhöhe zu gering wird. ich kann mein anliegen leider auch nur sehr stümperhaft erklären. jedenfalls, wenn ich deine css übernehme, hängt alles unter dem footer und legt sich nicht über den inhalt.
 
Tut mir leid, aber nun habe ich deinen kompletten HTML-Code genommen und neu angepasst. Bei mir funktioniert's. Also so ganz ohne HTML/CSS/JS Veständnis wird es wohl nix werden.
 
Werbung:
einiges verständis hab ich schon. habs jetzt mit display-flex eine einfache lösung hinbekommen.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben