순수 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/)를 방문하고 CSS에서 충돌이나 틈새를 탐색합니다. 또는 [Lightbox 2] (http://lokeshdhakar.com/projects/lightbox2/) – Martin

예를 사용하십시오. 이 코드가 여기에서 작동하는 것을 보았습니다. 그래서 내가 어디에서 문제인지 이해하지 못합니다. 방화범이 듭니다. 하지만 라이트 박스를 개인 설정하는 데 시간이 걸렸으므로 라이트 박스를 변경하고 싶지는 않습니다. 감사합니다. –

이상한 점은 id가 다음과 같이 URL에 표시된다는 것입니다 (로컬) : 사용자/문서 // Site/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 라이트 박스 문제

답변

관련 문제