[ad_1]
我从一位去世的朋友那里得到了这个剧本
它显示按时间和日期排序的图像。 单击拇指即可正常工作,但我想将图像查看到边框并通过单击边框外部将其关闭
我尝试过的:
CSS
.column { float: left; padding: 3px; } .row { display: flex; } /* Clear floats after image containers */ .row::after { content: ""; clear: both; display: table; }
PHP
echo ''; echo ''; echo ''; echo ''; echo '<title>Last received images from the Me'; echo ''; echo ''; echo ''; echo ''; echo '<p align="center"><font size="6"> Received images from the Meteor m-2 '; echo ' </font></p>'; echo '<p align="center"><font size="6"> This week '; echo ' </font></p>'; echo '<p align="center"><font size="2">(click on a image to view in real size)</font></p>'; echo ''; echo ''; echo ''; echo ''; echo ''; echo ''; ?> $file, "large_name" => $large_filename,"realdate_created" => $realdate , "weekday_number" => $weekday_number, "weekday" => $weekday , "file_date" => $filedate, "realdate_created" => $realdate, "realdate_unix" => $realdate_unix); $counter++; } } } closedir($handle); $columns = array_column($fileNames, 'realdate_unix'); array_multisort($columns, SORT_DESC, $fileNames); $loop_counter = 0; $weekday_number_loop = 99; foreach ($fileNames as &$value) { if($fileNames[$loop_counter]['weekday_number'] <> $weekday_number_loop){ $weekday_number_loop = $fileNames[$loop_counter]['weekday_number']; echo "<div class="row">"; echo "<div class="column">"; echo $fileNames[$loop_counter]['weekday']." ".$fileNames[$loop_counter]['file_date']; echo "</div>"; } echo "<div class="column">"; echo "<a href="".$large_image_dir.$fileNames[$loop_counter][" target="_blank">"; echo ""; echo "</a>"; echo "</div>"; $loop_counter++; if(count($fileNames)-1 >= $loop_counter){ if($fileNames[$loop_counter]['weekday_number'] <> $weekday_number_loop){ echo "</div>"; } } } echo ""; }else { echo "<p>There is an directory read issue , no received images yet </p>"; } ?>
解决方案1
PHP 与您想要的无关,它只是获取图像并将其作为服务器端工具发布到您的页面上。 您正在寻找一个 CSS 解决方案,它将显示缩略图,然后用户单击缩略图,打开大图像,显示后,单击关闭按钮或大图像的外边框,图像 div 将关闭。
[ad_2]
コメント