Cách xem hình ảnh có viền và đóng nó bằng cách nhấp vào bên ngoài viền

lập trình


Tôi có kịch bản này từ một người bạn đã qua đời

Nó hiển thị các hình ảnh được sắp xếp theo thời gian và ngày. Nó hoạt động tốt bằng cách nhấp vào ngón tay cái nhưng tôi muốn xem hình ảnh có viền và đóng nó bằng cách nhấp vào bên ngoài viền

Những gì tôi đã thử:

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

Giải pháp 1

PHP không liên quan gì đến những gì bạn muốn, nó chỉ tìm nạp hình ảnh và đăng chúng lên trang của bạn dưới dạng một công cụ phía máy chủ. Bạn đang tìm kiếm một giải pháp CSS sẽ hiển thị hình thu nhỏ và sau đó người dùng nhấp vào hình thu nhỏ, mở hình ảnh lớn, sau khi hiển thị, hãy nhấp vào nút đóng hoặc đường viền bên ngoài của hình ảnh lớn và div hình ảnh sẽ đóng lại.

Trang chủ CodePen
CSS Click để phóng to hình ảnh trong hộp đèn
[^]

コメント

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