css - 纯 CSS 灯箱问题

标签 css lightbox

我正在仅使用 CSS 开发 CSS 照片库，但遇到了问题。我尝试制作一个包含 5 个元素(图片)的灯箱，并且效果很好。但是当我想添加一些新图片时，它就不起作用了，我不知道为什么。这就像最后一张图片以全尺寸显示在页面其他元素的前面(但具有隐藏属性)。所以我看到了页面，但我无法点击链接... 这是代码:

#GalleryContent {
	height: 817px;
	margin-top: 100px;
	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%;
   	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;
   	  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;
	font-size: 0.8em;
	color: #FFF;
	border: 1px solid #FFF;
	padding: 0px 3px 2px 3px;
}

.lightbox #legend {
	padding-bottom: 10px;
	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;
   	color:#FFF;
   	padding-top: 12px;

 }

.next {
    float:right;
	color:#FFF;
	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>

非常感谢您的帮助。

最佳答案

也许你想要这样的东西。

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

关于css - 纯 CSS 灯箱问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39676816/

上一篇：javascript - 使用 wordpress 悬停时显示/隐藏图像缩略图标签

下一篇：jquery - CSS 动画动态起始状态

相关文章：

php - 进入时打开的 HTML 5 灯箱

javascript - 根据所选的 'name' 类，将 'select' 属性添加到 'li' 标签

css - 灯箱 CSS 自定义

javascript - 用于 html div 的 Mootools Lightbox？

javascript - 从函数中使用 iframe 打开 fancybox 弹出窗口

popup - 我无法播放大型弹出式动画

javascript - Croppic.net 图像尺寸错误且无法裁剪

javascript - jquery:切换一个div的 child

css - 使用 calc() 根据纵横比创建自动调整大小的元素？

jquery - 使用 jQuery 存储点击的链接状态？

©2024 IT工具网  联系我们