how to popup image over the screen after clicking the image
<p>In my code, there is a lot of image in a table. I want to click a photo &amp; then the photo will popup in a large size over the screen. But I do not have much idea about javascript &amp; jquery. I try to do this but the problem is it popup a box but don't show the picture. I know that there is a problm in script to show the picture. can u please tell me where is the wrong or give me a proper code for popup image after click.</p>

<p>my header link is below. is there need any other link to be added??</p>

<pre><code>    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;

    &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
    &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;

    &lt;link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.2.min.css" /&gt;
    &lt;script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.2.min.js"&gt;&lt;/script&gt;
</code></pre>

<p>here is html part:</p>

<pre><code>&lt;div&gt;
    &lt;td&gt; &lt;img class="btn" onclick="popup()" style="width:100px; height:100px; border-radius:4px;" src="upload/&lt;?php echo $row['image'];?&gt;"&gt;&lt;/img&gt;&lt;/td&gt;
&lt;/div&gt;
</code></pre>

<p>here is the javascript:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    function popup() {
        w2popup.open({
            title: 'Image',
            body: '&lt;div class="w2ui-centered"&gt;&lt;img src="upload/&lt;?php echo $row['image'];?&gt;"&gt;&lt;/img&gt;&lt;/div&gt;'
        });
    }
&lt;/script&gt;
</code></pre>

<p>can  anyone please help me how to show image in the pop up box. thanks in advance.</p>