example_usage.markdown

javascript:

var pp = "/images/test/images_";
var images_p1 = [ pp + '1.jpg', pp + '2.jpg', pp + '3.jpg', pp + '4.jpg', pp + '5.jpg' ];
var images_p2 = [ pp + '6.jpg', pp + '7.jpg', pp + '8.jpg', pp + '9.jpg', pp + '10.jpg' ];

$('.preview').slideview(function(e) { return e.id == "p1" ? images_p1 : images_p2; }, {width: 100, height: 100});

html:

<div id="p1" class="preview"></div>
<div id="p2" class="preview"></div>

jquery.slideview.js

(function($) {
	
	$.fn.slideview = function(slides, settings) {
		return this.each(function() {
			init(this, slides, settings);
		});
	}
	
	function init(element, slides, settings) {
		if ($.isFunction(slides)) slides = slides(element);
		height = settings.height || 75;
		width = settings.width || 75;
		
		$viewport  = $(element).css({ overflow: 'hidden', width: width + 'px', height: height + 'px' }).addClass('slideview-viewport').empty();
		$container = $('<div></div>').css({ overflow: 'hidden', margin: 0, padding: 0, border: 0, height: height + 'px', width: (width*slides.length) + 'px' })
										.addClass('slideview-container').appendTo($viewport);
		
		for (i = 0; i < slides.length; i++) {
			$('<div><img src="' + slides[i] + '" alt=""/></div>')
				.css({ margin: 0, padding: 0, width: width + 'px', height: height + 'px', overflow: 'hidden', 'float': 'left', border: 0 })
				.addClass('slideview-slide').appendTo($container);
		}
		
		$viewport.bind('mousemove.slideview', function(evt) {
			x = evt.pageX - this.offsetLeft;
			offset = Math.floor(x / (width / slides.length)) * width;
			$(this).animate({ scrollLeft: offset }, 10);
			return false;
		});
	}
	
})(jQuery);