Skip to content
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
dora-gt commented May 26, 2011

Unfortunately it doesn't work on IE7...

@lwe
Owner
lwe commented May 26, 2011

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

@dora-gt
dora-gt commented May 26, 2011

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
lwe commented May 26, 2011

added, thx.

@dora-gt
dora-gt commented May 26, 2011

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

@lwe
Owner
lwe commented May 26, 2011

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
Something went wrong with that request. Please try again.