Uncaught TypeError while using ZURB Foundation Orbit

Question

I am using ZURB Foundation's Orbit image slider and trying to call a function associated with afterSlideChange. Here is the code snippet:

$(window).load(function() {
   $("#view-show").orbit({
      animation: 'horizontal-push',        // fade, horizontal-slide, vertical-slide, horizontal-push
      animationSpeed: 1200,                // how fast animtions are
      timer: false,                        // true or false to have the timer
      resetTimerOnClick: false,           // true resets the timer instead of pausing slideshow progress
      advanceSpeed: 4000,                 // if timer is enabled, time between transitions
      pauseOnHover: false,                // if you hover pauses the slider
      shouldtartClockOnMouseOut: false,   // if clock should start on MouseOut
      startClockOnMouseOutAfter: 1000,    // how long after MouseOut should the timer start again
      directionalNav: true,               // manual advancing directional navs
      captions: true,                     // do you want captions?
      captionAnimation: 'fade',           // fade, slideOpen, none
      captionAnimationSpeed: 1200,         // if so how quickly should they animate in
      bullets: false,                     // true or false to activate the bullet navigation
      bulletThumbs: false,                // thumbnails for the bullets
      bulletThumbLocation: '',            // location from this file where thumbs will be
      afterSlideChange: function(){

            var maxWidth = 400; // Max width for the image
            var maxHeight = 300;    // Max height for the image
            var ratio = 0;  // Used for aspect ratio
            var cur = this.$slides[this.activeSlide];
            console.log(cur);
            var width = cur.width();    // Current image width
            var height = cur.height();  // Current image height
            // Check if the current width is larger than the max
            if(width > height){
              height = ( height / width ) * maxHeight;
            } else if(height > width){
            maxWidth = (width/height)* maxWidth;
            }
            cur.css("width", maxWidth); // Set new width
            cur.css("height", maxHeight);  // Scale height based on ratio

      },     // empty function
      fluid: true                         // or set a aspect ratio for content slides (ex: '4x3')
  })
});

I get the following error:

Uncaught TypeError: Property 'width' of object #<HTMLImageElement> is not a function

Do you know as what I am doing wrong?

Jack Jack · Accepted Answer · 2012-12-03T16:27:32

Your cur variable probably isn't coming back as a jquery object.

Try:

var cur = $(this.$slides[this.activeSlide]);

Uncaught TypeError while using ZURB Foundation Orbit

1 Answers