public
Last active

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

  • Download Gist
example_usage.markdown
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
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
(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();

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

no worries there ;) thanks for the fix.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.