title: Dynamically resize Simple Modal Depending on what is clicked
body: <p>I am fairly new to jQuery/JavaScript so I am having a few problems, hopefully you can point me on the right track.</p>
  
  <p>On my project I have a row of images, showing previews of images. Kind of a image gallery.</p>
  
  <p>I want to be able to click onto the smaller images and then get simple Modal to display the full size image, dynamically resizing and animating.</p>
  
  <p>Can I do this with Ajax, to refresh simple modal? I am still learning how to use Ajax with jQuery and there seems many ways to do it.</p>
  
  <p>Here is what I have:</p>
  
  <p>jQuery:</p>
  
  <pre><code>$('.col1').find('img.overlay').click(function() {
  
                  $('#imgpreview').modal({overlayClose:true});
  
                  var img = $(this).parent().find('img.shared').attr('src');
                  var imgW = $(this).parent().find('img.shared').attr('width');
                  var imgH = $(this).parent().find('img.shared').attr('height');
  
                  $('#imgpreview').css('width', imgW);
                  $('#imgpreview').css('height', imgH);                   
                  $('#imgpreview').find('img').attr('src', img);
  
              });
  
      });
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>            &lt;div id="imgpreview"&gt;&lt;img src=""&gt;&lt;/div&gt;
                          &lt;div class="col1 bg"&gt;&lt;img class="overlay" src="img/overlay.gif" width="104" height="104"&gt;&lt;img class="shared" width="104" height="104" src="img/uploaded/img1.jpg"&gt;&lt;/div&gt;
                          &lt;div class="col1 bg"&gt;&lt;img class="overlay" src="img/overlay.gif" width="104" height="104"&gt;&lt;img class="shared" width="104" height="104" src="img/uploaded/img2.jpg"&gt;&lt;/div&gt;
                          &lt;div class="col1 bg"&gt;&lt;img class="overlay" src="img/overlay.gif" width="104" height="104"&gt;&lt;img class="shared" width="104" height="104" src="img/uploaded/img3.jpg"&gt;&lt;/div&gt;
                          &lt;div class="col1 bg"&gt;&lt;img class="overlay" src="img/overlay.gif" width="104" height="104"&gt;&lt;img class="shared" width="104" height="104" src="img/uploaded/img4.png"&gt;&lt;/div&gt;
                          &lt;div class="col1 bg"&gt;&lt;img class="overlay" src="img/overlay.gif" width="104" height="104"&gt;&lt;img class="shared" width="104" height="104" src="img/uploaded/img5.jpg"&gt;&lt;/div&gt;
                          &lt;div class="col1 bg nmr"&gt;&lt;img class="overlay" src="img/overlay.gif" width="104" height="104"&gt;&lt;img class="shared" width="104" src="img/uploaded/img6.jpg"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I can display the image inside the simple modal but the image does not sit inside the dimensions of the image so I can give it a border and styling, also means it does not sit in the middle.</p>
  
  <p>Another option is to create a simple modal dialogue box for each image and echo out the jQuery with PHP since the images will be in the database. But would there be a better way?</p>