CitroenDsVier
Lt. Commander
- Registriert
- Dez. 2013
- Beiträge
- 1.896
Hallo zusammen,
ich versuche (ähnlich wie es hier gelöst ist), Bilder auf einer Website durch draufklicken zu vergrößern. Das soll Javascript beim Klick auf das jeweilige Bild erledigen.
Der Aufbau der Website sieht folgendermaßen aus:
css:
Javascript vertauscht den z-index der beiden jetzt und setzt die opacity vom content-overlay auf 0.75. :
So weit kommt es aber gar nicht, denn z-Index scheint so nicht zu funktionieren. Stattdessen ist der content-overlay dauerhaft "oben". Wie kommt das?
ich versuche (ähnlich wie es hier gelöst ist), Bilder auf einer Website durch draufklicken zu vergrößern. Das soll Javascript beim Klick auf das jeweilige Bild erledigen.
Der Aufbau der Website sieht folgendermaßen aus:
HTML:
<html>
<head>
</head>
<body>
<div id="site"> <!-- Site: width: 80% -->
<header></header>
<div id="sidebar"></div>
<div id="content"></div>
</div>
<div id="content-overlay"></div>
</body>
</html>css:
Code:
#content-overlay {
opacity: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-color: #000;
z-index: 1;
}
#site {
width: 80%;
min-width: 1360px;
max-width: 2000px;
margin: 0 auto;
z-index: 2;
}Javascript vertauscht den z-index der beiden jetzt und setzt die opacity vom content-overlay auf 0.75. :
Code:
var main = function() {
var windowShown = false;
$('.image').click(function() {
if(windowShown===false) {
$('content-overlay').animate({
opacity: "0.75"
}, 200);
windowShown = true;
} else if(windowShown===true) {
$('content-overlay').animate({
opacity: "0"
}, 200);
windowShown = true;
}
}
}
$(document).ready(main);So weit kommt es aber gar nicht, denn z-Index scheint so nicht zu funktionieren. Stattdessen ist der content-overlay dauerhaft "oben". Wie kommt das?
Und genau so setze ich es auch ein für eine Galerie oder ein Bild im Artikel.
