title: Jquery Thumbnail image preview
body: <p>I have added the JQuery Lightbox to my ASP.net application. But I have a problem when i click on thumbnail  image the preview image shown is very big image with scroll up-down, right-left. Like this iamge</p>
  
  <p><img src="https://i.stack.imgur.com/inwno.png" alt="enter image description here"></p>
  
  <p>and I want to display the image preview like this.</p>
  
  <p><img src="https://i.stack.imgur.com/eueh4.png" alt="enter image description here"></p>
  
  <p>How i can fix the width and height for specific preview? Which file should I edit or change for this purpose?. The file added are image is given below.</p>
  
  <p><img src="https://i.stack.imgur.com/4vxcX.png" alt="enter image description here"></p>
  
  <p>The ASP.net code is given Below</p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MyAPNSWebApp._Default" %&gt;
  
  &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 runat="server"&gt;
          &lt;title&gt;Jquery LightBox Example&lt;/title&gt;
          &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/jquery.lightbox-0.5.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /&gt;
      &lt;script type="text/javascript" src="js/lightbox_resize.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="css/lightbox_r.css" type="text/css" media="screen"&gt;
          &lt;script type="text/javascript"&gt;
              $(function() {
                  $('#gallery a').lightBox();
              });
          &lt;/script&gt;
          &lt;style type="text/css"&gt;
          /* jQuery lightBox plugin - Gallery style */
              #gallery {
                  background-color: #444;
                  padding: 2px;
                  width: 800px;
              }
              #gallery ul { list-style: none; }
              #gallery ul li { display: inline; }
              #gallery ul img {
                  border: 5px solid #3e3e3e;
                  border-width: 5px 5px 20px;
              }
              #gallery ul a:hover img {
                  border: 5px solid #fff;
                  border-width: 5px 5px 20px;
                  color: #fff;
              }
              #gallery ul a:hover { color: #fff; }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;form id="form1" runat="server"&gt;       
              &lt;h2 id="example"&gt;Example&lt;/h2&gt;
              &lt;p&gt;Click in the image and see the &lt;strong&gt;jQuery lightBox plugin&lt;/strong&gt; in action.&lt;/p&gt;
              &lt;div id="gallery"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;
                          &lt;a href="photos/image1.jpg" title="Media Monitors All Pakistan Newspapers Web Hub!"&gt;
                              &lt;img src="photos/thumb_image1.jpg" width="72" height="72" alt="" /&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="photos/image2.jpg" title="Media Monitors All Pakistan Newspapers Web Hub!"&gt;
                              &lt;img src="photos/thumb_image2.jpg" width="72" height="72" alt="" /&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="photos/image3.jpg" title="Media Monitors All Pakistan Newspapers Web Hub!"&gt;
                              &lt;img src="photos/thumb_image3.jpg" width="72" height="72" alt="" /&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="photos/image4.jpg" title="Media Monitors All Pakistan Newspapers Web Hub!"&gt;
                              &lt;img src="photos/thumb_image4.jpg" width="72" height="72" alt="" /&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="photos/image5.jpg" title="Media Monitors All Pakistan Newspapers Web Hub!"&gt;
                              &lt;img src="photos/thumb_image5.jpg" width="72" height="72" alt="" /&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>