किसी छवि को बॉर्डर में कैसे देखें और बॉर्डर के बाहर क्लिक करके उसे कैसे बंद करें


मेरे पास यह स्क्रिप्ट एक मित्र की है जिसका निधन हो चुका है

यह समय और दिनांक के अनुसार क्रमबद्ध छवियां दिखाता है। यह अंगूठे पर क्लिक करके ठीक काम करता है लेकिन मैं छवि को सीमाओं में देखना चाहता हूं और सीमाओं के बाहर क्लिक करके इसे बंद करना चाहता हूं

मैंने क्या प्रयास किया है:

सीएसएस
.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 का कोई लेना-देना नहीं है, यह केवल छवियां लाता है और उन्हें सर्वर साइड टूल के रूप में आपके पेज पर पोस्ट करता है। आप एक सीएसएस समाधान की तलाश कर रहे हैं जो थंबनेल दिखाएगा और फिर उपयोगकर्ता थंबनेल पर क्लिक करेगा, बड़ी छवि खोलेगा, एक बार दिखाए जाने पर, बंद करें बटन या बड़ी छवि की बाहरी सीमा पर क्लिक करें और छवि div बंद हो जाएगी।

कोडपेन होम
लाइट बॉक्स में छवि को बड़ा करने के लिए सीएसएस क्लिक करें
[^]

コメント

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