Cara melihat gambar ke dalam border dan menutupnya klik di luar border

pemrograman


Saya mendapat skrip ini dari seorang teman yang telah meninggal dunia

Ini menunjukkan gambar yang diurutkan berdasarkan waktu dan tanggal. Ini berfungsi baik dengan mengklik ibu jari tetapi saya ingin melihat gambar ke dalam batas dan menutupnya dengan mengklik di luar batas

Apa yang saya coba:

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>";
}
?>

Solusi 1

PHP tidak ada hubungannya dengan apa yang Anda inginkan, PHP hanya mengambil gambar dan mempostingnya di halaman Anda sebagai alat sisi server. Anda mencari solusi CSS yang akan menampilkan thumbnail dan kemudian pengguna mengklik thumbnail, membuka gambar besar, setelah ditampilkan, klik tombol tutup atau di luar batas gambar besar dan div gambar akan ditutup.

Beranda CodePen
CSS Klik untuk memperbesar gambar di kotak cahaya
[^]

コメント

タイトルとURLをコピーしました