[ad_1]
Tengo este guión de un amigo que falleció.
Muestra las imágenes ordenadas por hora y fecha. Funciona bien haciendo clic en el pulgar, pero quiero ver la imagen dentro de los bordes y cerrarla haciendo clic fuera de los bordes.
Lo que he probado:
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>"; } ?>
Solución 1
PHP no tiene nada que ver con lo que deseas, solo busca las imágenes y las publica en tu página como herramienta del lado del servidor. Está buscando una solución CSS que muestre miniaturas y luego un usuario haga clic en una miniatura, abra una imagen grande, una vez que se muestre, haga clic en el botón cerrar o en el borde exterior de la imagen grande y la imagen div se cerrará.
Inicio de CodePen
CSS Haga clic para ampliar la imagen en la caja de luz.[^]
[ad_2]
コメント