slider responsive code for drupal

Question

I'm trying to us this code to make drupal slider responsive, but console showes this error "undefined is not a function " .

$(window).resize(function () {
    $('.views-slideshow-cycle-main-frame').each(function () {
        var heightImgNow = '';
        $(this).find('.views-slideshow-cycle-main-frame-row').each(function () {
            var thisDisplay = $(this).prop("style").display;
            var thisImgHeight = $(this).find('img').height();
            if (thisDisplay == 'block') {
                heightImgNow = thisImgHeight;
            }
        });
        if (heightImgNow != '') {
            // set div height    = now image height.
            $(this).height(heightImgNow);
        }
    });
});

I have put the code in the views_slideshow.js file. Does anybody now what's wrong?

Answer 1

I used the code bellow on a recent site.

    $(window).resize(function(){
      $('.views_slideshow_cycle_main').each(function(){
        var cycleMain = $(this);
        var img_width = 0,
            img_height = 0;
        var clearCSS = {width: "auto", height: "auto"};
        var cycle = cycleMain.children('.views-slideshow-cycle-main-frame');
        cycleElements = cycle.data("cycle.opts");
        cycle.css(clearCSS);
        cycleMain.find('.views-slideshow-cycle-main-frame-row').each(function(i){
          $(this).css(clearCSS);
          var tmp_img_width = $(this).width();
          var tmp_img_height = $(this).height();
          if(tmp_img_width > img_width)
            img_width = tmp_img_width;
          if(tmp_img_height > img_height)
            img_height = tmp_img_height;
          cycleElements.elements[i].cycleW = tmp_img_width;
          cycleElements.elements[i].cycleH = tmp_img_height;
          $(this).css({width: tmp_img_width, height: tmp_img_height});
        });
        cycleMain.height(img_height);
        cycle.css({width: img_width, height: img_height});
        cycle.data("cycle.opts.elements", cycleElements);
      });
    });