純粋な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/）、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ライトボックスの問題

答えて

関連する問題