einsiedler: externen php-file content per php nachladen

Beitrag lesen

hier noch die CSS zur bildergalerie:

@charset "utf-8";
/* CSS Document */


input#box1, input#box2,input#box3,input#box4,input#box5 {
    display: none;
}
label { cursor: pointer }
#foto_ausgabemodul {
 position: relative;
  width: 45.5vw;
  height: 34vw;
  overflow: hidden;
  margin: 0 auto;
  border: 2px dotted red;
}
#foto_ausgabemodul .switch {
  position: relative;
  left:1vw ;
  height: 1vw;
  width: 1vw;
  float: left;
  color: rgba(0,0,0,0.6);
   -webkit-transition: 0.5s;
       -moz-transition: 0.5s;
        -ms-transition: 0.5s;
         -o-transition: 0.5s;
            transition: 0.5s;
}
#foto_ausgabemodul .switch:hover {
  opacity: 1;
    -webkit-transition: 0.5s;
       -moz-transition: 0.5s;
        -ms-transition: 0.5s;
         -o-transition: 0.5s;
            transition: 0.5s;
}
#foto_ausgabemodul .holder {
  position: relative;
  width: 5vw;
  border: 1px dotted orange;
}
#foto_ausgabemodul_1 img,
#foto_ausgabemodul_2 img,
#foto_ausgabemodul_3 img,
#foto_ausgabemodul_4 img,
#foto_ausgabemodul_5 img  {
  position: absolute;
  top: 0;
  left: 4.5vw;
  opacity: 0;
     -webkit-transition: 0.5s;
       -moz-transition: 0.5s;
        -ms-transition: 0.5s;
         -o-transition: 0.5s;
            transition: 0.5s;
}
#foto_ausgabemodul #box1:checked ~ div#foto_ausgabemodul_1  img,#foto_ausgabemodul #box2:checked ~ div#foto_ausgabemodul_2 img, 
#foto_ausgabemodul #box3:checked ~ div#foto_ausgabemodul_3 img,#foto_ausgabemodul #box4:checked ~ div#foto_ausgabemodul_4 img, 
#foto_ausgabemodul #box5:checked ~ div#foto_ausgabemodul_5 img   {
    opacity: 1;
     -webkit-transition: 0.5s;
       -moz-transition: 0.5s;
        -ms-transition: 0.5s;
         -o-transition: 0.5s;
            transition: 0.5s;
}

#foto_ausgabemodul #box1:checked ~ div { margin-left: 0px }
#foto_ausgabemodul #box2:checked ~ div { margin-left: -1vw }
#foto_ausgabemodul #box3:checked ~ div { margin-left: -2vw }
#foto_ausgabemodul #box4:checked ~ div { margin-left: -3vw }
#foto_ausgabemodul #box5:checked ~ div { margin-left: -4vw }

#box1:checked ~ div #zwei::after {
  top: 31vw;
  left: 40vw;
  position: absolute;
  display: block;
  font-size: 2.5vw;
  content:">>";
  z-index: 2;
}

#box2:checked ~ div #eins::before {
  top: 31vw;
  left: 0.5vw;
  position: absolute;
  display: block;
  font-size: 2.5vw;
  content:"<<";
  z-index: 2;
}
#box2:checked ~ div #drei::after {
  top: 31vw;
  left: 40vw;
  position: absolute;
  display: block;
  font-size: 2.5vw;
  content:">>";
  z-index: 2;
}
#box3:checked ~ div #zwei::before {
  top: 31vw;
  left: 0.5vw;
  position: absolute;
  display: block;
  font-size: 2.5vw;
  content:"<<";
  z-index: 2;
}
#box3:checked ~ div #vier::after {
  top: 31vw;
  left:40vw;
  position: absolute;
  display: block;
  font-size: 2.5vw;
  content:">>";
  z-index: 2;
}
#box4:checked ~ div #drei::before {
  top: 31vw;
  left: 0.5vw;
  position: absolute;
  display: block;
  font-size: 2.5vw;
  content:"<<";
  z-index: 2;
}
#box4:checked ~ div #fünf::after {
  top: 31vw;
  left:40vw;
 position: absolute;
  display: block;
  font-size: 2.5vw;
  content:">>";
  z-index: 2;
}
#box5:checked ~ div #vier::before {
  top: 31vw;
  left: 0.5vw;
 position: absolute;
  display: block;
  font-size: 2.5vw;
  content:"<<";
  z-index: 2;
}