reine CSS-Lightbox-Ausgabe

Ich arbeite an einer CSS-Fotogalerie nur in CSS und ich habe ein Problem. Ich versuche eine Lightbox mit 5 Elementen (Bildern) zu machen und es hat perfekt funktioniert. Aber wenn ich ein paar neue Bilder hinzufügen will, funktioniert es nicht mehr und ich weiß nicht warum. Es ist genau so, wie das letzte Bild in voller Größe vor den anderen Elementen der Seite angezeigt wurde (aber mit versteckter Eigenschaft). Also habe ich die Seite sehen, aber ich kann die Links nicht klicken ... Hier ist der Code:reine CSS-Lightbox-Ausgabe

#GalleryContent { 
 
\t height: 817px; 
 
\t margin-top: 100px; 
 
\t margin-left: 55px; 
 
} 
 

 

 

 
#gallery a { 
 
    text-decoration:none; 
 
} 
 

 
#gallery .item { 
 
    width: 200px; height: 200px; overflow: hidden; 
 
    float: left; 
 
    border: 5px solid #000; 
 
    margin: 5px; 
 
    box-shadow: 1px 1px 1px 1px #d8c4a3; 
 
} 
 

 
#gallery .item a { 
 
    overflow: hidden; 
 
} 
 

 
#gallery .item a img { 
 
    height: 100%; 
 
    align-self: center; 
 
} 
 

 
.lightbox { 
 
    /** Hide the lightbox */ 
 
    opacity: 0; 
 
    /** Apply basic lightbox styling */ 
 
    position: fixed; 
 
    z-index: 9999; 
 
    width: 100%; 
 
    height: 90%; 
 
    \t top: -100%; 
 
    left: 0; 
 
    color:#333333; 
 
    -webkit-transition: opacity .5s ease-in-out; 
 
    -moz-transition: opacity .5s ease-in-out; 
 
    -o-transition: opacity .5s ease-in-out; 
 
    transition: opacity .5s ease-in-out; 
 
} 
 

 
.lightbox:target { 
 
    /** Show lightbox when it is target */ 
 
    opacity: 1; 
 
    outline: none; 
 
    top: 0; 
 
} 
 

 
.lightbox .box { 
 
     width: -webkit-min-content; 
 
     width: -moz-min-content; 
 
     width: min-content; 
 
     min-width: 500px; 
 
     margin: auto; 
 
     padding: 20px 30px 20px 30px; 
 
     background-color: #000; 
 
     box-shadow: 0px 1px 26px -3px #000; 
 
     font-family: 'IM Fell English', serif; 
 
    \t color: #FFF; 
 
} 
 

 
.lightbox .title { 
 
    margin: 0; 
 
    padding: 0 0 10px 0px; 
 
    border-bottom: 1px #ccc solid; 
 
    } 
 

 
.lightbox .content { 
 
    display: block; 
 
    position: relative; 
 

 
} 
 

 
.lightbox .close { 
 
    display:block; 
 
    float:right; 
 
    margin-top: -10px; 
 
    text-decoration:none; 
 
    font-family: 'Helvetica', sans-serif; 
 
\t font-size: 0.8em; 
 
\t color: #FFF; 
 
\t border: 1px solid #FFF; 
 
\t padding: 0px 3px 2px 3px; 
 
} 
 

 
.lightbox #legend { 
 
\t padding-bottom: 10px; 
 
\t margin-top: -10px; 
 

 
} 
 

 
.clear { 
 
    display:block; 
 
    clear:both; 
 

 
} 
 

 
/* back and previous buttons */ 
 

 
.lightbox .next, 
 
.lightbox .prev, 
 
.lightbox .close { 
 
    display:block; 
 
    text-decoration:none; 
 

 
} 
 

 
.prev { 
 
    float:left; 
 
    \t color:#FFF; 
 
    \t padding-top: 12px; 
 

 
} 
 

 
.next { 
 
    float:right; 
 
\t color:#FFF; 
 
\t padding-top: 12px; 
 

 
} 
 

 
.close { 
 
    float:right; 
 
} 
 

 
.clear { 
 
    display:block; 
 
    clear:both; 
 
}

<div id="GalleryContent"> 
 

 
       <section id="gallery"> 
 
        <section class="item"> 
 
         <a href="#img1"> 
 
         <img src="images/galerie/voltigeurs-1.jpg"> 
 
         </a> 
 
        </section> 
 

 
        <section class="item"> 
 
         <a href="#img2"> 
 
         <img src="images/galerie/voltigeurs-2.jpg"> 
 
         </a> 
 
        </section> 
 

 
        <section class="item"> 
 
        <a href="#img3"> 
 
        <img src="images/galerie/voltigeurs-3.jpg"> 
 
        </a> 
 
        </section> 
 

 
        <section class="item"> 
 
        <a href="#img4"> 
 
        <img src="images/galerie/voltigeurs-4.jpg"> 
 
        </a> 
 
        </section> 
 

 
        <section class="item"> 
 
        <a href="#img5"> 
 
        <img src="images/galerie/voltigeurs-5.jpg"> 
 
        </a> 
 
        </section> 
 

 
        <section class="item"> 
 
        <a href="#img6"> 
 
        <img src="images/galerie/voltigeurs-6.jpg"> 
 
        </a> 
 
        </section> 
 

 
        <section class="item"> 
 
        <a href="#img7"> 
 
        <img src="images/galerie/voltigeurs-7.jpg"> 
 
        </a> 
 
        </section> 
 

 
        <section class="item"> 
 
        <a href="#img8"> 
 
        <img src="images/galerie/voltigeurs-8.jpg"> 
 
        </a> 
 
        </section> 
 

 
        <section class="item"> 
 
        <a href="#img9"> 
 
        <img src="images/galerie/voltigeurs-9.jpg"> 
 
        </a> 
 
        </section> 
 

 
        <section class="item"> 
 
        <a href="#img10"> 
 
        <img src="images/galerie/voltigeurs-10.jpg"> 
 
        </a> 
 
        </section> 
 

 
        <section class="item"> 
 
        <a href="#img11"> 
 
        <img src="images/galerie/voltigeurs-11.jpg"> 
 
        </a> 
 
        </section> 
 

 
        <section class="item"> 
 
        <a href="#img12"> 
 
        <img src="images/galerie/voltigeurs-12.jpg"> 
 
        </a> 
 
        </section> 
 
       </section> 
 
      </div> 
 

 
      <!-- lightbox container hidden with CSS --> 
 
      <div class="lightbox" id="img1"> 
 
       <div class="box"> 
 
        <a class="close" href="#">x</a> 
 
        <div id="legend">1</div> 
 
        <div class="content"> 
 
         <img src="images/galerie/voltigeurs-1.jpg"> 
 
        </div> 
 
       <!-- Previous Image Button --> 
 
       <a class="prev" href="#"><img src="images/hand_right_white.png" width="40px"></a> 
 
       <!-- Next Image Button --> 
 
       <a class="next" href="#img2"><img src="images/hand_left_white.png" width="40px"></a> 
 
       <div class="clear"></div> 
 
       </div> 
 
      </div> 
 

 
      <div class="lightbox" id="img2"> 
 
       <div class="box"> 
 
        <a class="close" href="#">x</a> 
 
        <div id="legend">2</div> 
 
        <div class="content"> 
 
         <img src="images/galerie/voltigeurs-2.jpg"> 
 
        </div> 
 
       <!-- Previous Image Button --> 
 
       <a class="prev" href="#img1"><img src="images/hand_right_white.png" width="40px"></a> 
 
       <!-- Next Image Button --> 
 
       <a class="next" href="#img3"><img src="images/hand_left_white.png" width="40px"></a> 
 
       <div class="clear"></div> 
 
       </div> 
 
      </div> 
 

 

 
      <div class="lightbox" id="img3"> 
 
       <div class="box"> 
 
        <a class="close" href="#">x</a> 
 
        <div id="legend">3</div> 
 
        <div class="content"> 
 
         <img src="images/galerie/voltigeurs-3.jpg"> 
 
        </div> 
 
       <!-- Previous Image Button --> 
 
       <a class="prev" href="#img2"><img src="images/hand_right_white.png" width="40px"></a> 
 
       <!-- Next Image Button --> 
 
       <a class="next" href="#img4"><img src="images/hand_left_white.png" width="40px"></a> 
 
       <div class="clear"></div> 
 
       </div> 
 
      </div> 
 

 
      <div class="lightbox" id="img4"> 
 
       <div class="box"> 
 
        <a class="close" href="#">x</a> 
 
        <div id="legend">4</div> 
 
        <div class="content"> 
 
         <img src="images/galerie/voltigeurs-4.jpg"> 
 
        </div> 
 
       <!-- Previous Image Button --> 
 
       <a class="prev" href="#img3"><img src="images/hand_right_white.png" width="40px"></a> 
 
       <!-- Next Image Button --> 
 
       <a class="next" href="#img5"><img src="images/hand_left_white.png" width="40px"></a> 
 
       <div class="clear"></div> 
 
       </div> 
 
      </div> 
 
      <div class="lightbox" id="img5"> 
 
       <div class="box"> 
 
        <a class="close" href="#">x</a> 
 
        <div id="legend">5</div> 
 
        <div class="content"> 
 
         <img src="images/galerie/voltigeurs-5.jpg"> 
 
        </div> 
 
       <!-- Previous Image Button --> 
 
       <a class="prev" href="#img4"><img src="images/hand_right_white.png" width="40px"></a> 
 
       <!-- Next Image Button --> 
 
       <a class="next" href="#img6"><img src="images/hand_left_white.png" width="40px"></a> 
 
       <div class="clear"></div> 
 
       </div> 
 
      </div> 
 
      <div class="lightbox" id="img6"> 
 
       <div class="box"> 
 
        <a class="close" href="#">x</a> 
 
        <div id="legend">6</div> 
 
        <div class="content"> 
 
         <img src="images/galerie/voltigeurs-6.jpg"> 
 
        </div> 
 
       <!-- Previous Image Button --> 
 
       <a class="prev" href="#img5"><img src="images/hand_right_white.png" width="40px"></a> 
 
       <!-- Next Image Button --> 
 
       <a class="next" href="#img7"><img src="images/hand_left_white.png" width="40px"></a> 
 
       <div class="clear"></div> 
 
       </div> 
 
      </div> 
 

 
      <div class="lightbox" id="img7"> 
 
       <div class="box"> 
 
        <a class="close" href="#">x</a> 
 
        <div id="legend">7</div> 
 
        <div class="content"> 
 
         <img src="images/galerie/voltigeurs-7.jpg"> 
 
        </div> 
 
       <!-- Previous Image Button --> 
 
       <a class="prev" href="#img6"><img src="images/hand_right_white.png" width="40px"></a> 
 
       <!-- Next Image Button --> 
 
       <a class="next" href="#img8"><img src="images/hand_left_white.png" width="40px"></a> 
 
       <div class="clear"></div> 
 
       </div> 
 
      </div> 
 

 

 
      <div class="lightbox" id="img8"> 
 
       <div class="box"> 
 
        <a class="close" href="#">x</a> 
 
        <div id="legend">8</div> 
 
        <div class="content"> 
 
         <img src="images/galerie/voltigeurs-8.jpg"> 
 
        </div> 
 
       <!-- Previous Image Button --> 
 
       <a class="prev" href="#img7"><img src="images/hand_right_white.png" width="40px"></a> 
 
       <!-- Next Image Button --> 
 
       <a class="next" href="#img9"><img src="images/hand_left_white.png" width="40px"></a> 
 
       <div class="clear"></div> 
 
       </div> 
 
      </div> 
 

 
      <div class="lightbox" id="img9"> 
 
       <div class="box"> 
 
        <a class="close" href="#">x</a> 
 
        <div id="legend">9</div> 
 
        <div class="content"> 
 
         <img src="images/galerie/voltigeurs-9.jpg"> 
 
        </div> 
 
       <!-- Previous Image Button --> 
 
       <a class="prev" href="#img8"><img src="images/hand_right_white.png" width="40px"></a> 
 
       <!-- Next Image Button --> 
 
       <a class="next" href="#img10"><img src="images/hand_left_white.png" width="40px"></a> 
 
       <div class="clear"></div> 
 
       </div> 
 
      </div> 
 
      <div class="lightbox" id="img10"> 
 
       <div class="box"> 
 
        <a class="close" href="#">x</a> 
 
        <div id="legend">10</div> 
 
        <div class="content"> 
 
         <img src="images/galerie/voltigeurs-10.jpg"> 
 
        </div> 
 
       <!-- Previous Image Button --> 
 
       <a class="prev" href="#img9"><img src="images/hand_right_white.png" width="40px"></a> 
 
       <!-- Next Image Button --> 
 
       <a class="next" href="#img11"><img src="images/hand_left_white.png" width="40px"></a> 
 
       <div class="clear"></div> 
 
       </div> 
 
      </div> 
 
       <div class="lightbox" id="img11"> 
 
       <div class="box"> 
 
        <a class="close" href="#">x</a> 
 
        <div id="legend">11</div> 
 
        <div class="content"> 
 
         <img src="images/galerie/voltigeurs-11.jpg"> 
 
        </div> 
 
       <!-- Previous Image Button --> 
 
       <a class="prev" href="#img10"><img src="images/hand_right_white.png" width="40px"></a> 
 
       <!-- Next Image Button --> 
 
       <a class="next" href="#img12"><img src="images/hand_left_white.png" width="40px"></a> 
 
       <div class="clear"></div> 
 
       </div> 
 
      </div> 
 
      <div class="lightbox" id="img12"> 
 
       <div class="box"> 
 
        <a class="close" href="#">x</a> 
 
        <div id="legend">12</div> 
 
        <div class="content"> 
 
         <img src="images/galerie/voltigeurs-12.jpg"> 
 
        </div> 
 
       <!-- Previous Image Button --> 
 
       <a class="prev" href="#img11"><img src="images/hand_right_white.png" width="40px"></a> 
 
       <!-- Next Image Button --> 
 
       <a class="next" href="#img1"><img src="images/hand_left_white.png" width="40px"></a> 
 
       <div class="clear"></div> 
 
       </div> 
 
      </div>

Vielen Dank für Ihre Hilfe.

Quelle

2016-09-24 G. Delvigne

das Code-Snippet Sie in Ihrer Frage haben scheint korrekt zu funktionieren, schließlich, was würden Sie am besten tun [bekommen firebug ] (http://getfirebug.com/) und in Firebug alle CSS-Konflikte oder Lücken zu erkunden. Alternativ verwenden Sie [Lightbox 2] (http://lokeshdhakar.com/projects/lightbox2/) – Martin

Ja. Ich habe gesehen, dass dieser Code hier funktioniert. Deshalb verstehe ich nicht, wo das Problem liegt. Ich werde Firebug versuchen. Aber ich möchte den Leuchtkasten jetzt nicht mehr ändern, weil ich Zeit brauchte, ihn zu personalisieren. Vielen Dank! –

Was seltsam ist, ist, dass die ID so auf der URL erscheint (lokal): Benutzer/Dokumente // Site/galerie.html # im6 Wie es auf der Seite angezeigt wurde (mit versteckter Funktion). –

Vielleicht möchten Sie etwas wie das.

*{ 
    margin:0; 
    padding:0; 
    } 
#gallery{ 
    border:1px solid red; 
    margin:auto; 
    width:500px; 
    padding:5px; 
    height:800px; 
    } 
#thumbs{ 
    width:150px; 
    height:150px; 
    border:1px solid green; 
    padding:5px; 
    float:left; 
    margin:5px; 
    } 
#thumbs img{ 
    width:100%; 
    height:100%; 
} 
.lightbox{ 
    visibility:hidden; 
    opacity:0; 
    position:fixed; 
    top:0; 
    left:0; 
    background-color:rgba(72,73,74,1); 
    height:100%; 
    width:100%; 
    } 
.lightbox:target{ 
    visibility:visible; 
    opacity:1; 
    transition:opacity 2s; 
} 
#outer{ 
    background-color:#FFF; 
    width:min-content; 
    height:400px; 
    margin:auto; 
    margin-top:30px; 
    box-shadow:0px 0px 35px #000000; 
    padding:10px; 
    } 

#inner img{ 
    max-height:500px; 
    max-width:800px; 
    } 
.lightbox a{ 
    text-decoration:none; 
    font-size:20px; 
    color:#666; 
    } 
#cross{ 
    float:right; 
    } 
#next{ 
    float:right; 
    }

<div id="gallery"> 
    <div id="thumbs"> 
     <a href="#lightbox1"><img src="img1.jpg"/></a> 
    </div> 
     <div id="thumbs"> 
     <a href="#lightbox2"><img src="img2.jpg"/></a> 
    </div> 
     <div id="thumbs"> 
     <a href="#lightbox3"><img src="img3.jpg"/></a> 
    </div> 
     <div id="thumbs"> 
     <a href="#lightbox4"><img src="img4.jpg"/></a> 
    </div> 
     <div id="thumbs"> 
     <a href="#lightbox5"><img src="img5.jpg"/></a> 
    </div> 
     <div id="thumbs"> 
     <a href="#lightbox6"><img src="img6.jpg"/></a> 
    </div> 
     <div id="thumbs"> 
     <a href="#lightbox7"><img src="img7.jpg"/></a> 
    </div> 
     <div id="thumbs"> 
     <a href="#lightbox8"><img src="img8.jpg"/></a> 
    </div> 
    </div> 
    <div class="lightbox" id="lightbox1"> 
     <div id="outer"> 
     <p id="title">Image 
     <a href="#" id="cross">X</a></p> 
      <div id="inner"> 
      <img src="img1.jpg"/> 
      </div> 
      <p><a href="#lightbox2" id="next">Next</a> 
      <a href="#lightbox8" id="prev">Previous</a></p> 
     </div> 
    </div> 

    <div class="lightbox" id="lightbox2"> 
     <div id="outer"> 
     <p id="title">Image 
     <a href="#" id="cross">X</a></p> 
      <div id="inner"> 
      <img src="img2.jpg"/> 
      </div> 
      <p><a href="#lightbox3" id="next">Next</a> 
      <a href="#lightbox1" id="prev">Previous</a></p> 
     </div> 
    </div> 

    <div class="lightbox" id="lightbox3"> 
     <div id="outer"> 
     <p id="title">Image 
     <a href="#" id="cross">X</a></p> 
      <div id="inner"> 
      <img src="img3.jpg"/> 
      </div> 
      <p><a href="#lightbox4" id="next">Next</a> 
      <a href="#lightbox2" id="prev">Previous</a></p> 
     </div> 
    </div> 

    <div class="lightbox" id="lightbox4"> 
     <div id="outer"> 
     <p id="title">Image 
     <a href="#" id="cross">X</a></p> 
      <div id="inner"> 
      <img src="img4.jpg"/> 
      </div> 
      <p><a href="#lightbox5" id="next">Next</a> 
      <a href="#lightbox3" id="prev">Previous</a></p> 
     </div> 
    </div> 

    <div class="lightbox" id="lightbox5"> 
     <div id="outer"> 
     <p id="title">Image 
     <a href="#" id="cross">X</a></p> 
      <div id="inner"> 
      <img src="img5.jpg"/> 
      </div> 
      <p><a href="#lightbox6" id="next">Next</a> 
      <a href="#lightbox4" id="prev">Previous</a></p> 
     </div> 
    </div> 

    <div class="lightbox" id="lightbox6"> 
     <div id="outer"> 
     <p id="title">Image 
     <a href="#" id="cross">X</a></p> 
      <div id="inner"> 
      <img src="img6.jpg"/> 
      </div> 
      <p><a href="#lightbox7" id="next">Next</a> 
      <a href="#lightbox5" id="prev">Previous</a></p> 
     </div> 
    </div> 

    <div class="lightbox" id="lightbox7"> 
     <div id="outer"> 
     <p id="title">Image 
     <a href="#" id="cross">X</a></p> 
      <div id="inner"> 
      <img src="img7.jpg"/> 
      </div> 
      <p><a href="#lightbox8" id="next">Next</a> 
      <a href="#lightbox6" id="prev">Previous</a></p> 
     </div> 
    </div> 



    <div class="lightbox" id="lightbox7"> 
     <div id="outer"> 
     <p id="title">Image 
     <a href="#" id="cross">X</a></p> 
      <div id="inner"> 
      <img src="img7.jpg"/> 
      </div> 
      <p><a href="#lightbox8" id="next">Next</a> 
      <a href="#lightbox6" id="prev">Previous</a></p> 
     </div> 
    </div> 


    <div class="lightbox" id="lightbox8"> 
     <div id="outer"> 
     <p id="title">Image 
     <a href="#" id="cross">X</a></p> 
      <div id="inner"> 
      <img src="img8.jpg"/> 
      </div> 
      <p><a href="#lightbox9" id="next">Next</a> 
      <a href="#lightbox7" id="prev">Previous</a></p> 
     </div> 
    </div>

Bitte überprüfen Sie diese Videos: - https://www.youtube.com/watch?v=q7ZhOczh35A & https://www.youtube.com/watch?v=82SwGTvM_DU

Quelle

2016-09-24 17:47:41

reine CSS-Lightbox-Ausgabe

Antwort

Verwandte Themen