Click here to Skip to main content
16,018,264 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have this script from a friend who has passed away

It shows the images sorted by time and date. It works OK by clicking the thumb but I want to view the image into borders and close it by clicking outside the borders

What I have tried:

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>";
}
?>
Posted
Updated 21-Dec-23 22:24pm
v3
Comments
Richard Deeming 22-Dec-23 4:26am    
It sounds like you're looking for a "lightbox" script? For example, Lightbox2[^].
Eric Reitsma 2023 22-Dec-23 5:12am    
looks like it but i dontknow how te make one
Richard Deeming 22-Dec-23 5:14am    
The one I linked to has exampled of how to use it; it's just a case of generating the right HTML and linking the required script and CSS files.
Eric Reitsma 2023 22-Dec-23 5:16am    
oke thanks i wil look at it
Eric Reitsma 2023 22-Dec-23 7:51am    
sorry not working for me the page is gerated by my script
i think i need a compleet new script but i'm a noob on PHP
i want is to extrakt the date from the image file name and genarate a webpage whit rows thats have a date txt under the images from that date en bij clicking the thumb opens the big file in a border and close the image when click outsite the border

see:
https://www.pd3lkn.nl/METEOR/index.php
for how its working now

1 solution

PHP has nothing to do with what you want, it only fetches the images and post them on your page being a server side tool. You are looking for a CSS solution that will show thumbnails and then a user clicks on a thumbnail, open large image, once shown, click the close button or outside border of large image and the image div will close.

CodePen Home
CSS Click to enlarge image in light box
[^]
 
Share this answer
 
Comments
Eric Reitsma 2023 22-Dec-23 15:24pm    
Hi Andre but i already have a script thats shows the tumbs on a web page the only thing i need is to view the tumbs in realsize when i click them and close them when click outside the image i never used css so i dont know how to make it inside the script ?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900