纯CSS的灯箱问题

我正在CSS CSS图片库中工作，我遇到了问题。我试着做一个有5个元素的灯箱（图片），它完美的工作。但是当我想添加一些新图片时，它不再起作用，我不知道为什么。就像最后一张照片在页面的其他元素前面以全尺寸显示（但带有隐藏属性）。所以我看到的页面，但我不能点击链接... 下面是代码：纯CSS的灯箱问题

#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>

非常感谢你的帮助。

来源

2016-09-24 G. Delvigne

的代码片段，你有你的问题似乎正常工作，最终什么你最好做的是[让萤火虫]（http://getfirebug.com/），并在firebug中探索任何CSS冲突或间隙。或者使用[Lightbox 2]（http://lokeshdhakar.com/projects/lightbox2/） – Martin

是的。我看到这个代码在这里工作。这就是为什么我不明白问题在哪里。我会尝试萤火虫。但我现在不想改变灯箱，因为花了我的时间去个性化它。谢谢！ –

奇怪的是，这个ID出现在像这样（本地）的url：用户/文档//网站/ galerie.html＃im6 就像它显示在页面上（带有隐藏功能）。 –

可能你想要这样的东西。

*{ 
    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>

请检查该视频： - https://www.youtube.com/watch?v=q7ZhOczh35A & https://www.youtube.com/watch?v=82SwGTvM_DU

来源

2016-09-24 17:47:41

纯CSS的灯箱问题

回答

相关问题