كيفية عرض صورة داخل الحدود وإغلاقها بالنقر خارج الحدود


لدي هذا السيناريو من صديق توفي

يعرض الصور مرتبة حسب الوقت والتاريخ. إنه يعمل بشكل جيد من خلال النقر على الإبهام ولكني أريد عرض الصورة داخل الحدود وإغلاقها عن طريق النقر خارج الحدود

ما حاولت:

CSS
.column {
  float: left;
  padding: 3px;
}
.row {
  display: flex;
}
/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}

بي أتش بي
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 يعرض الصور المصغرة ثم ينقر المستخدم على الصورة المصغرة، ويفتح صورة كبيرة، وبمجرد ظهورها، انقر فوق زر الإغلاق أو الحد الخارجي للصورة الكبيرة وسيتم إغلاق قسم الصورة.

الصفحة الرئيسية لـ CodePen
CSS انقر لتكبير الصورة في مربع الضوء
[^]

コメント

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