Create a gist now

Instantly share code, notes, and snippets.

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

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>
(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);
@dora-gt

Unfortunately it doesn't work on IE7...

@lwe
Owner

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

@dora-gt

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();

@lwe
Owner

added, thx.

@dora-gt

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

@lwe
Owner

no worries there ;) thanks for the fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment