CODEWITHSUNDEEP
javascriptphpjqueryhtmlimage
captain monk
captain monk

Reputation: 727

Open window on image click and also close new window on click

I use this code in order to display the images i retrieved from my database. $path contains the path to an image and $res_path contains the path to a smaller version of the same image. What i'm trying to do is when the user clicks the image a new window (not new tab) will appear containing only the image which exists in $path. Then when the user clicks on the image which exists in that new pop up window i want that window to close. Any hint will be helpfull. code: 

<?php
                //unset($_SESSION['search']);
                if( isset($_SESSION['search']) )
                {
                    //unset($_SESSION['search']);
                    $rows = $_SESSION['search_rows'];
                    $photoArray = $_SESSION['search'];
                }
                else
                {
                    $rows = $_SESSION['rows'];
                    $photoArray = $_SESSION['array'];
                }
                //display all photos in database
                //$rows = $_SESSION['rows'];
                for ($x = 0; $x < $rows; $x++) {
                    $name = $photoArray[$x][1];
                    $username = $photoArray[$x][8];
                    $category = $photoArray[$x][9];
                    $description = $photoArray[$x][2];
                    $likes = $photoArray[$x][7];
                    $path = $photoArray[$x][3];
                    $res_path = $photoArray[$x][4];
             ?>
             <center><table style="width:80%" height = "320" align="center">
                <tr>
                    <th rowspan="6" width="50%"><img onclick="myFunction('<?php echo $path ?>')" src="<?php echo $res_path ?>" alt=""></img></th>
                    <td>Name: <?php echo $name; ?></td>
                </tr>
                <tr><td>User: <?php echo $username; ?></td></tr>
                <tr><td>Category: <?php echo $category; ?></td></tr>
                <tr><td>Description: <?php echo $description; ?></td></tr>
                <tr><td>path: <?php echo $path; ?></td></tr>
                <tr><td>Likes: <?php echo $likes; ?></td></tr>
            </table></center>
             <?php 
             unset($_SESSION['search']);
             unset($_SESSION['search_rows']);
             } 
             ?>

And this is my javascript file which creates the new window. I thought that by using window.write() i could write a javascript function which closes the new window on click but i'm doing something wrong. js:

function myFunction(data) {
    img = new Image();
    img.src = data;
    window.open(data, '_blank', 'toolbar=0,location=0,menubar=0, width = '+ img.width +', height=' + img.height);
    //window.write(<script type="text/javascript"> $(document).click(function(e) { if (e.button == 0) {window.close(); }}); </script>);
}

Upvotes: 0

Views: 1233

Answers (1)

del cueto
del cueto

Reputation: 111

As stated by @Rikudou_Sennin you can use some Javascript to be able to create a the experience that you are looking for, the tool that you are looking for is a Modal ( also known as a Lightbox), if you are familiar with Javascript I would suggest you to use Magnific Popup. If you are not familiar with Javascript or JQuery, you can take a CSS approach, a tutorial and some examples on achieving this can be found here. I would have loved to leave the answer as a comment but I still don't have that right.

Upvotes: 1

Related Questions