title: how to popup image over the screen after clicking the image
body: <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>