iPhoto-like preview batches (Video in action: http://www.vimeo.com/6639381)

example_usage.markdown

in action: http://www.vimeo.com/6639381

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; }, { size: 75 });

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);
		size = settings.size || 75;
		
		$viewport  = $(element).css({ overflow: 'hidden', width: size + 'px', height: size + 'px', position: 'relative' }).addClass('slideview-viewport').empty();
		$container = $('<div></div>').css({ overflow: 'hidden', margin: 0, padding: 0, border: 0, height: size + 'px', width: (size*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: size + 'px', height: size + '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 / (size / slides.length)) * size;
			$(this).animate({ scrollLeft: offset }, 10);
			return false;
		});
	}
	
})(jQuery);

Unfortunately it doesn't work on IE7...

To be honest... it could also be an incompatibility with the latest jQuery. Any chance you might come up with a fix?

Yes, I've just come up with a solution.
Could you change the line 13 to the following?
I remedied my local source and it worked well on IE7 with jQuery 1.6.1.

$viewport = $(element).css({ overflow: 'hidden', width: size + 'px', height: size + 'px', position: "relative" }).addClass('slideview-viewport').empty();

added, thx.

Thank you and sorry not to notice using " instead of '.

no worries there ;) thanks for the fix.

I know 7 years is a long time, still this a good feature (I think).

This work if "size" is larger than 450. For some reason with 120px as size it does not work.

I used this as line 25:
offset = (Math.floor(x/size) - slides.length) * size;