Plugin Simplyscroll

[Middrel]

Hola, buenas tardes,

Tengo una duda con respecto a lo siguiente:

El siguiente código listado, es el plugin de jQuery, simplyScroll 1.0.4, el cuál funciona perfectamente en la página donde lo implementé. Sin embargo, la parte donde está implementado es un slide verticalr con dos botones que, cuando te posicionas sobre estos, suben o bajan automáticamente las imágenes dentro de este.

El alto del div que contiene las imágenes es de 450px y cada imagen mide 225px. Cuando estoy sobre los botones las imágenes suben o bajan y cuando quito el mouse del botón se detienen, pero, al detenerse algunas imágenes quedan a la mitad de su camino, es decir, se ve media imagen, mi duda es: ¿Cómo puedo hacer para modificar en alguna parte del plugin para que las imágenes no queden a medias? es decir, suba o baje la imagen dependiendo de la acción que se aplico.

Código:

(function($) {

$.fn.simplyScrolla = function(o) {
	return this.each(function() {
		new $.simplyScrolla(this,o);
	});
};

var defaults = {
	className: 'vert-a',
	frameRate: 24, //No of movements per second
	speed: 5, //No of pixels per frame
	horizontal: false,
	autoMode: 'off', //disables buttons 'loop','bounce'
	pauseOnHover: true,
	startOnLoad: false, //use this if having rendering problems (safari 3 + Mac OSX?)
	localJsonSource: '', //format [{"src":"images/pic.jpg","title":"title","link":"http://"},{etc..}]
	flickrFeed: '',
	jsonImgWidth: 210,
	jsonImgHeight: 225
};
	
$.simplyScrolla = function(el,o) {
	
	var self = this;
	
	this.o = $.extend({}, defaults, o || {});
	this.auto = this.o.autoMode!=="off" ? true : false;
	
	//called on ul/ol/div etc
	this.$list = $(el);
	
	//generate extra markup
	this.$list.addClass('simply-scroll-list-a')
		.wrap('<div class="simply-scroll-clip-a"></div>')
		.parent().wrap('<div class="' + this.o.className + ' simply-scroll-container-a"></div>');
	
	if (!this.o.auto) { //button placeholders
		this.$list.parent().parent()
		.prepend('<div class="simply-scroll-forward-a"></div>')
		.prepend('<div class="simply-scroll-back-a"></div>');
	}
	
	//load image data
	if (this.o.flickrFeed) {
		$.getJSON(this.o.flickrFeed + "&format=json&jsoncallback=?",
			function(data) {
				json = [];
				$.each(data.items, function(i,item) {
					json.push({
						"src": item.media.m,
						"title": item.title,
						"link": item.link
					});
				});
				self.renderData(json);
			}
		);
	} else if (this.o.localJsonSource) {
		$.getJSON(this.o.localJsonSource,
			function(json) {
				self.renderData(json);
			}
		);
	} else {
		
		if (!this.o.startOnLoad) {
			this.init();
		} else {
			//wait for load before completing setup
			$(window).load(function() { self.init();  });
		}
		
	}
		
};
	
$.simplyScrolla.fn = $.simplyScrolla.prototype = {};

$.simplyScrolla.fn.extend = $.simplyScrolla.extend = $.extend;

$.simplyScrolla.fn.extend({
	init: function() {
		//shortcuts
		this.$items = this.$list.children();
		this.$clip = this.$list.parent();
		this.$container = this.$clip.parent();

		if (!this.o.horizontal) {
			this.itemMax = this.$items.eq(0).outerHeight(true); 
			this.clipMax = this.$clip.height();
			this.dimension = 'height';			
			this.moveBackClass = 'simply-scroll-btn-up-a';
			this.moveForwardClass = 'simply-scroll-btn-down-a';
		} else {
			this.itemMax = this.$items.eq(0).outerWidth(true);
			this.clipMax = this.$clip.width();			
			this.dimension = 'width';
			this.moveBackClass = 'simply-scroll-btn-left-a';
			this.moveForwardClass = 'simply-scroll-btn-right-a';
		}
		
		this.posMin = 0;
		
		/* 
		IMPORTANT: The script assumes multiple elements within a list are the same width or height 
		to work out how many extra elements to generate to simulate the loop. 
		
		If you want this script to work with unequal sized elements don't modify the next line 
		to do this:
		
		this.$items.each(function() {
			self.posMax += !this.o.horizontal ? $(this).outerHeight(true) : $(this).outerWidth(true);
		});
		
		as it will cause white-space and a jump to appear when elements have wildly different dimensions
		See: http://logicbox.net/jquery/simplyscroll/test_unequalelements.html
		
		Instead simply add an extra wrapper element around your list and init simplyScroll on that, 
		essentially scrolling just one element. Less efficient but it does the job!
		
		*/
		this.posMax = this.$items.length * this.itemMax;
		
		this.$list.css(this.dimension,this.posMax +'px');
		
		if (this.o.autoMode=='loop') {
			var addItems = Math.ceil(this.clipMax / this.itemMax);	
			this.$items.slice(0,addItems).clone(true).appendTo(this.$list);
			this.posMax += (this.clipMax - this.o.speed);
			this.$list.css(this.dimension,this.posMax+(this.itemMax*addItems) +'px');
		}
		
		this.interval = null;	
		this.intervalDelay = Math.floor(1000 / this.o.frameRate);
		
		//ensure that speed is divisible by item width
		while (this.itemMax % this.o.speed !== 0) {
			this.o.speed--;
			if (this.o.speed===0) {
				this.o.speed=1; break;	
			}
		}
		
		var self = this;
		this.trigger = null;
		this.funcMoveBack = function() { self.trigger=this;self.moveBack(); };
		this.funcMoveForward = function() { self.trigger=this;self.moveForward(); };
		this.funcMoveStop = function() { self.moveStop(); };
		this.funcMoveResume = function() { self.moveResume(); };
		
		if (this.auto) {
			if (this.o.pauseOnHover) {
				this.$clip.hover(this.funcMoveStop,this.funcMoveResume);
			}
			this.moveForward();
		} else {
			this.$btnBack = $('.simply-scroll-back-a',this.$container)
				.addClass('simply-scroll-btn-a' + ' ' + this.moveBackClass + ' ' + 'disabled')
				.hover(this.funcMoveBack,this.funcMoveStop);
			this.$btnForward = $('.simply-scroll-forward-a',this.$container)
				.addClass('simply-scroll-btn-a' + ' ' + this.moveForwardClass)
				.hover(this.funcMoveForward,this.funcMoveStop);
		}
	},
	moveForward: function() {
		var self = this;
		this.movement = 'forward';
		if (this.trigger !== null) {
			this.$btnBack.removeClass('disabled');
		}
		self.interval = setInterval(function() {
			if (!self.o.horizontal && self.$clip[0].scrollTop < (self.posMax-self.clipMax)) {
				self.$clip[0].scrollTop += self.o.speed;
			} else if (self.o.horizontal && self.$clip[0].scrollLeft < (self.posMax-self.clipMax)) {
				self.$clip[0].scrollLeft += self.o.speed; 
			} else if (self.o.autoMode=='loop') {
				self.resetPos();
			} else {
				self.moveStop(self.movement);
			}
		},self.intervalDelay);
	},
	moveBack: function() {
		var self = this;
		this.movement = 'back';
		if (this.trigger !== null) {
			this.$btnForward.removeClass('disabled');
		}
		self.interval = setInterval(function() {
			if (!self.o.horizontal && self.$clip[0].scrollTop>0) {
				self.$clip[0].scrollTop -= self.o.speed;
			} else if (self.o.horizontal && self.$clip[0].scrollLeft>0) {
				self.$clip[0].scrollLeft -= self.o.speed;
			} else if (self.o.autoMode=='loop') {
				self.resetPos();
			} else {
				self.moveStop(self.movement);
			}
		},self.intervalDelay);
	},
	moveStop: function(moveDir) {
		clearInterval(this.interval);	
		if (this.trigger!==null) {
			if (typeof moveDir != "undefined") {
				$(this.trigger).addClass('disabled');
			}
			this.trigger = null;
		}
		if (this.auto) {
			if (this.o.autoMode=='bounce') {
				moveDir == 'forward' ? this.moveBack() : this.moveForward();
			}
		}
	},
	moveResume: function() {
		this.movement=='forward' ? this.moveForward() : this.moveBack();
	},
	resetPos: function() {
		if (!this.o.horizontal) {
			this.$clip[0].scrollTop = 0;
		} else {
			this.$clip[0].scrollLeft = 0;
		}
	},
	renderData: function(json) {
		if (json.length>0) { //render json data
			var self = this;
			$.each(json, function(i,item) {
				$("<img/>").attr({
					src: item.src,
					title: item.title,
					alt: item.title,
					width: self.o.jsonImgWidth,
					height: self.o.jsonImgHeight
				}).appendTo(self.$list);
			});
			this.init();
		}
	}
});
		  
})(jQuery);

La siguiente página es un ejemplo de como debe verse, aunque esta está realizada en flash.

http://www.saksfifthavenue.com/Entry.jsp ver slider vertical.

De antemano les agradezco sus comentarios y que tengan un excelente día!!