DateYourWeight
Mitglied
@Aaron3219 @basti1012 danke für die Empfehlung mit der Lightbox.
Das sieht in deinem Link @Aaron3219 ganz schick aus: https://jsfiddle.net/Aaron3219/mef2h7yd/1/
Aber bei mir funktioniert das Ganze nicht: https://testseite-dateyourweight.jimdo.com/
Das öffnet sich merkwürdig und lässt sich auch nicht mehr schließen.
Habe folgenden Code eingefügt:
Und an den Code im "Head bearbeiten" gedacht:
Gruß Sarah :)
Das sieht in deinem Link @Aaron3219 ganz schick aus: https://jsfiddle.net/Aaron3219/mef2h7yd/1/
Aber bei mir funktioniert das Ganze nicht: https://testseite-dateyourweight.jimdo.com/
Das öffnet sich merkwürdig und lässt sich auch nicht mehr schließen.
Habe folgenden Code eingefügt:
Code:
<p>
Runterscrollen<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
</p>
<p>
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content
</p>
<div class="lightbox">
<div>
<img alt="Es ist ein Fehler aufgetreten" src="" />
<div class="close">
<div onclick="document.querySelector('.lightbox').style.display = 'none'">
</div>
</div>
</div>
</div>
<img onclick="lightbox()" class="small-picture" alt="Es ist ein Fehler aufgetreten" src="https://assets.pixolum.com/blog/wp-content/uploads/2016/10/focus-stacking-scharfe-bilder-1.jpg" />
<p>
Runterscrollen<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
</p>
<p>
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content
</p>
<style>
/* <![CDATA[ */
* {
margin: 0;
padding: 0;
}
body {
background: white;
overflow: auto;
text-align: center;
}
.lightbox {
display: none;
position: fixed;
z-index: 10000;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
top: 0;
background: rgba(0,0,0,0.4);
}
.lightbox > div {
position: relative;
}
.lightbox img {
border-radius: 5px;
width: 90%;
max-height: 90%;
max-width: 600px;
}
.small-picture {
width: 100%;
max-width: 300px;
max-height: 90vH;
cursor: pointer;
}
.close {
color: white;
position: absolute;
top: 0;
right: 0;
}
.close > div {
position: relative;
cursor: pointer;
}
.close span {
display: block;
width: 5px;
height: 30px;
background: white;
border-radius: 100px;
position: absolute;
top: -15px;
right: 27px;
}
.close > div > span:first-child {
transform: rotate(45deg);
}
.close > div > span:last-child {
transform: rotate(-45deg);
}
@media only screen and (max-height: 400px) {
.small-picture {
width: 100%;
max-width: 300px;
max-height: 90vH;
width: auto;
}
}
@media only screen and (max-height: 500px) {
.lightbox img {
max-width: 90%;
max-height: 90vH;
width: auto;
}
}
/*]]>*/
</style>
<script>
/* <![CDATA[ */
function lightbox() {
var source = event.target.getAttribute("src");
document.querySelector(".lightbox img").setAttribute("src", source);
document.querySelector(".lightbox").style.display = "flex";
}
/*]]>*/
</script>Und an den Code im "Head bearbeiten" gedacht:
Code:
zoomimage-zoom > img {
max-width: 100%;
}Gruß Sarah :)
).
??
