view image on new window

Question

I made code using php in which it will display all the images in browser from specified path with define width and height. now I want to develop a code in which if I click on any of the image it should display me in original size in new window. please guide. don't know how to do it.

Edited Question

image.php

<script language="javascript"> //disabling right click
document.onmousedown=disableclick;
status="Right Click Disabled";
function disableclick(event)
{
    if(event.button==2)
    {
        alert(status);
        return false;    
    }
}
</script>

<?php //displaying images on browser
$dir= '../images/';


$file_display = array('jpg','jpeg','png','gif');
if (file_exists($dir) == false) 
{
    echo 'Directory \''. $dir. '\' not found!';
}
else 
{
    $dir_contents = scandir($dir);

    foreach ($dir_contents as $file) 
    {
        $tmp = explode('.', $file);

        $f_e = end($tmp);
        $file_type = strtolower($f_e);

        if ($file !== '.' && $file !== '..' && in_array($file_type, $file_display) == true) 
        {
            echo '<img src="'. $dir.$file. '" alt="'.$file. '"style="width:250px;height:250px" />';
        }
    } 
}
?>

this code will display all the images on browser, in browser if m clicking on any of the images that images should be displayed on new window.

How can I get image id of the clicked image?

have you tried [window.open](http://www.w3schools.com/jsref/met_win_open.asp)? — Joe, Nov 15 '16 at 07:36
what to write in window.open. I mean in browser it is showing me all the images then how can I fetch their image name and then send it to another page. — Manjiri Parab, Nov 15 '16 at 07:37
It's unclear what you want. Show us what you have so far... maybe this will put some lights on what you want. Show how you load images on the page. — S.I., Nov 15 '16 at 07:49
Possible duplicate of [Open image in new window](http://stackoverflow.com/questions/8908022/open-image-in-new-window) — Jonathon Ogden, Nov 15 '16 at 08:09
Open the image by using `src` attribute. like this `echo '';` or assign a class name and write event function for the same. — Tintu C Raju, Nov 15 '16 at 08:16
@TintuCRaju this is the correct answer load of thanks to you — Manjiri Parab, Nov 15 '16 at 09:10
I wouldn't use `window.open` as it can be interpreted as a pop-up and there for blocked. — Anuga, Nov 15 '16 at 13:19

score 0 · Answer 1 · answered Nov 15 '16 at 07:41

0

TRY this:

<a href="#" target="_blank"><img src="IMG URL" ></a>

answered Nov 15 '16 at 07:41

Rajiv Choudhary

141
2
14

Developer · Answer 2 · 2016-11-15T07:54:01.633

0

you have the "target" attribute you can use it like that:

<a href=url to your picture target="_blank">Image in new window</a>

target = "_blank" will open the url in new window, try to fit that for what you want.

you can also put your image on top the 'a' attribute as "image link"

edited Nov 15 '16 at 07:54

answered Nov 15 '16 at 07:43

Developer

460
4
17

after the "click" event occured ,the handler function get 'e' as parameter, – Developer Nov 15 '16 at 07:53

score 0 · Answer 3 · answered Nov 15 '16 at 11:55

echo '<a href="'. $dir.$file. '" target="_blank" title="'.$file. '"><img src="'. $dir.$file. '" alt="'.$file. '" style="width: 250px;height: 250px"></a>';

Just enclose the img with a link that "targets" a new window/tab.

If you know the url where the images are stored on the server and know the url to the location, you can specify that in the link:

For example: <a href="/images/'. $file. '" target="_blank" title="'.$file. '">

view image on new window

3 Answers3