PHPでimagesフォルダ内の画像をforeachで繰り返し並べて、クリックすると同じ画像がポップアップするようにしたいのですが、ポップアップとして表示される部分で変数が反映されません。
HTML
1<?php 2 $targetDir="./postedimages"; 3 $imageFiles = glob($targetDir. DIRECTORY_SEPARATOR . "*.png"); 4 5 foreach($imageFiles as $i){ 6 ?> 7 <label class="open" for="pop-up"> 8 <?php 9 printf("<img src='%s' class='clickimg'>",$i); //ファイル名が反映される 10 11 ?> 12 </label> 13 <input type="checkbox" id="pop-up"> 14 <div class="overlay"> 15 <div class="window"> 16 <label class="close" for="pop-up">×</label> 17 <div> 18 <?php 19 printf("<div><p class='text'><img src='$i' class='popimage'></p></div>"); //反映されない 20 ?> 21 </div> 22 ポップアップ時のテキスト 23 </div> 24 </div> 25 <?php 26 27 } 28 ?>
CSS
1.open { 2 cursor: pointer; 3} 4#pop-up { 5 display: none; 6} 7.overlay { 8 display: none; 9} 10#pop-up:checked + .overlay { 11 display: block; 12 z-index: 9999; 13 background-color: #00000070; 14 position: fixed; 15 width: 100%; 16 height: 100vh; 17 top: 0; 18 left: 0; 19} 20.window { 21 width: 70%; 22 max-width: 500px; 23 height: 70%; 24 background-color: #ffffff; 25 border-radius: 6px; 26 display: flex; 27 justify-content: center; 28 align-items: center; 29 position: fixed; 30 top: 50%; 31 left: 50%; 32 transform: translate(-50%, -50%); 33} 34.text { 35 font-size: 18px; 36 margin: 0; 37} 38.close { 39 cursor: pointer; 40 position: absolute; 41 top: 4px; 42 right: 4px; 43 font-size: 20px; 44} 45 46.popimage { 47 width: 70%; 48 49 height: 70%; 50} 51
初心者ですので初歩的なミスかもしれませんが、教えていただけると幸いです。
追記:HMMLを実際に描きたいコードのみにして、CSSも書き出しました
例えばimagesフォルダ内に「a.png,b.png,c.png,d.png」の順に画像ファイルがあったとして、ページ内ではa.pngからd.pngまで順に表示されるのに対し、ポップアップを見るとどの画像をクリックしてもa.pngが表示されてしまうといった状況です。
id="pop-up"が一度しか使えないのに複数回使用していることが原因でしょうか
しかしclass="pop-up"としてcss内の#pop-upも.pop-upに変更したところ、ポップアップ自体が出なくなってしまいます。
javascriptは使用していません