Archiv-Modus von Basti1012 Lösungspage

Moin, moin, ich baue grade einen One-Pager und will ein Portfolio bestehend aus drei Bildern bzw. zwei Bildern und einem Video, einbauen. Die Vorschaubilder auf der Webseite sollen kreisförmig sein, wenn man sie anklickt, soll allerdings das Originalbild (bzw. Video) in einer Light Box erscheinen. Ich bin eher ein HTML / CSS Laie (weil eher der Designertyp) und weiß nicht wie ich das so hinbekomme ._. Hat jemand eine Idee, wie ich das machen kann? Falls ihr weitere Informationen braucht, gebt gern Bescheid

Code

                                    
                                <!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/js_webseite/jquery.js"></script>
  <style>
    body{
  background:lightgrey;
}
#infolinks {
  display: flex;
  text-align: center;
}

#infolinks a {
  margin-left: 5vw;
  margin-right: 5vw;
}

#infolinks a:hover {
  color: red;
  cursor: help;
}

 


#hintergrund{
  margin: -10px;
  padding: 10px;
  display: none;
  position: fixed;
  top:0px;
  left:0px;
  height: 100vh;
  width: 100vw;
  background:black;
  opacity: 0.8;
  text-align:center;
  z-index: 1000;
  border:10px solid black;
}





#boxinfo {
  position: fixed;
  display: none;
  height: 70vh;
  width: 70vw;
  top: 15vh;
  left: 15vw;
  text-align: center;
  background:black;
  border: 2px solid red;
  color: white;
  overflow: auto;
  z-index:1001;
 
}
#boxinfo img{
width:100%;
height:auto;
}


#close {
  display: block;
  position:fixed;
  top: 0px;
  left: 0px;
  width: 5vw;
  height: 5vw;
  Background: red;
  color: white;
  font-weight: 900;
  font-size: 4vw;
  z-index: 1002;
  cursor: pointer;
}
#conti{
position:absolute;
top:25vh;
left:15vw;
text-align:center;
}
#conti img{
  
  width:150px;
  height:150px;
    border:1px solid black;
  border-radius:50%;
}

#conti video{
  
  width:150px;
  height:150px;
    border:1px solid black;
  border-radius:50%;
}

    /* EOS */
  </style>
</head>
<body>
    <div id="hintergrund">
  <div id="close">X</div>
</div>

  
  <div id="boxinfo">
  </div>
  <div id="conti">
  
  <img class="bild" src="/image//ppt2html5-video-1.gif">

 <video class="video" controls>
  <source src="/media/mov_bbb.mp4" type="video/mp4">
  </video>
  <img class="bild" src="/image/HTML5-Video-Download-Titelbild-rcm1200x627u.jpg">
  </div>

    <script>
    $('.bild').click(function() {
   src= $(this).attr('src');
   $('#boxinfo').html("<img src="+src+">");
   $('#hintergrund,#boxinfo').css('display', 'block');
   $('#boxinfo').css('display', 'block');
 })

    $('.video').click(function() {
   src= $('source').attr('src');
 
   $('#boxinfo').html('<video  controls>  <source src="/media/mov_bbb.mp4" type="video/mp4">');

   $('#hintergrund,#boxinfo').css('display', 'block');
   $('#boxinfo').css('display', 'block');
 })









 $('#close').click(function() {
   $('#hintergrund,#boxinfo').css('display', 'none');
   $('#boxinfo').css('display', 'none');
 })


</script>

</body>
</html>

basti1012.bplaced.net

Runde Vorschaubilder originalbild Lightbox CSS hilfe

Code