another resizing issue with cycle plugin

another resizing issue with cycle plugin

Hello and thankyou in advance for any help, firstly a little about the problem I am having, I built the page around a single image at first, then decided to put a little slide show in the place, previously I had written a little script which adjusted the image size on initial load in the $(document).ready event. and also in the $(window).resize event the script looks like this .. and worked fine with an individual hard coded image.
 
  1. function adjustImage() {
  2.        var imgWidth, imgHeight, ratio, parentWidth;
  3.        $("img").each(function() {
  4.               imgWidth = $(this).width();
  5.               imgHeight = $(this).height();
  6.               ratio = imgHeight / imgWidth;
  7.               parentWidth = $(this).parent().width();
  8.               $(this).height(parentWidth * ratio);
  9.               $(this).width(parentWidth);
  10.        });
  11. }
now this is the tricky part after adding the cycle plugin and working it around for my clients ease of use to load images from a JSON file I found that the script no longer adjusted the image size at all, I managed to fix that issue. here is the script which loads the images and activates the cycle plugin
 
  1. $(function() {
  2.        $.getJSON("data/images.js", function(data) {
  3.               
  4.                $.each(data, function(key, val) {
  5.                      var items = [];
  6.                      for (var i=0; i < val.length; i++) {
  7.                             items.push('<img src="' + val[i].url + '" id="gallery' + i + '" alt="' + val[i].alt + '" title="' + val[i].title + '" class="ui-corner-all"></img>');
  8.                      }
  9.                var h = items.join('');
  10.                $(h).appendTo("#images");
  11.               });
  12.        })
  13.       
  14.        .fail(function( jqxhr, textStatus, error) { 
  15.               alert(error);
  16.        })
  17.        .done(function() {
  18.               adjustImage();
  19.               $("#images").cycle({
  20.                      fx: 'scrollVert',
  21.                      fit: 0,
  22.                      slideResize: 0 
  23.               });
  24.        })
  25. });
notice the highlighted function which is called after the JSON call is done. this fixed some of the problems but everytime I resize the window, due to the nature of the layout the images would sometimes cover other content. I fixed this with another solution found elsewhere in my css file like this.
 
  1. #images {
  2.        width: 100% !important;
  3.        height: auto; 
  4. }
this has solved the width resizing however the images still don't resize height.
 
now I am hoping there is a way that I can use my adjustImage function with cycle, even if it means destroying cycle and reinitialising it on window resize.