title: Display Larger version of image when image clicked
body: <p>I was wondering how to achieve this as I want something very lean and don't want to use light box. Here is my code so far. It automatically adds a click event to each image and calls a function to display the path of where the large image is. Now I just need to display the large image like a modal window in the center of the screen.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
  
          $(document).ready(function () {
              $('#imageContainer img').each(function (index) {
                  if ($(this).attr('onclick') != null) {                    
                      if ($(this).attr('onclick').indexOf("runThis()") == -1) {                        
                          $(this).click(function () {
                              $(this).attr('onclick');
                              var src = $(this).attr("src");
                              ShowLargeImage(src);
                          });
                      }
                  }
                  else {                    
                      $(this).click(function () {                        
                          var src = $(this).attr("src");
                          ShowLargeImage(src);
                      });
                  }
              });
          });
  
          function ShowLargeImage(imagePath) {
              alert(imagePath.replace("small","large"));
          }
  
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="imageContainer"&gt;        
          &lt;br /&gt;
          &lt;br /&gt;        
          &lt;img src="/img/small/image3.jpg" /&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;img src="/img/small/image2.jpg" /&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;img src="/img/small/image3.jpg" /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>